Skip to content
Seitensicht
Tools & navigation

Create a colour palette

Build a coordinated palette from one colour, or extract colours from an image. Includes shades for backgrounds and borders, with contrast checks beside each value.

A picture creates a fan of matching hues; light and dark text cards show the contrast.

How it works

Finding Colors That Work Together

  1. Select starting color or image
  2. Checking harmony and contrast
  3. Adopt color values

Starting colour

Colour harmony

The opposite pole in the color circle. Strong contrast - use sparingly.

Pallet

#1f5fd6

Primär

White 5.7 ✓ · Black 3.7 (large text only)

#9dbaf1

Akzent 1

White 2.0 ✗ · Black 10.7 ✓

#d6961f

Akzent 2

White 2.5 ✗ · Black 8.2 ✓

#f1d49d

Akzent 3

White 1.4 ✗ · Black 14.6 ✓

✓ means it meets WCAG for normal text (4.5:1). “Large text only” requires roughly 24 pixels, or 19 pixels in bold (3:1).

Primary colour shades

For backgrounds, borders and states. Saturation is reduced at the extremes to keep very light and dark shades comfortable to look at.

50

100

200

300

400

500

600

700

800

900

Pallet · 17 rows · 360 B
:root {
  --primaer: #1f5fd6;
  --akzent-1: #9dbaf1;
  --akzent-2: #d6961f;
  --akzent-3: #f1d49d;
  --primaer-50: #f4f6fa;
  --primaer-100: #e6ebf4;
  --primaer-200: #bcd0f5;
  --primaer-300: #8baeee;
  --primaer-400: #5688e6;
  --primaer-500: #1f5fd6;
  --primaer-600: #1c57c4;
  --primaer-700: #17459c;
  --primaer-800: #1b366a;
  --primaer-900: #112445;
}

Why every colour has a contrast score

A beautiful palette is of little use if its text is unreadable. Each colour shows whether black or white text meets WCAG contrast requirements: 4.5:1 for normal text, or 3:1 for large text, roughly 24 pixels or 19 pixels bold.

Contrast is an accessibility requirement. Since June 2025, Germany's accessibility legislation requires many businesses to make digital services accessible, and poor contrast is a frequent problem.

Regarding gradations

The 50–900 scale follows common design systems. Saturation is reduced at the lightest and darkest ends to avoid harsh colours when used across large areas.

The Harmony

Colour theory provides guidance, not guarantees. Uncoloured It's the hardest thing to do wrong. Complementary colours give the strongest contrast and are easy to overuse. A useful rule: one primary colour, one accent colour, and neutral shades for the rest.

The finished palette can be used directly in the Joomla template generator use it.

Other tools

From ‘Images and icons” and related categories. Free, with no sign-up.

A picture card is connected to a described text field; an eye and a loudspeaker stand for accessible content.

Write alt text

Choose an image type, check your description and copy the finished markup.

Open tool A content card becomes a QR code on a display that a smartphone scans.

Create a QR code

Create sixteen QR content types with your logo and colours, as PNG, SVG or print-ready PDF.

Open tool A large photo card and a smaller copy are matched to their dimensions with a ruler.

Resize images

Resize to fixed dimensions or a percentage, and optionally convert to another format.

Open tool A photo card is converted and comes out as a lighter file with the same image content.

Convert images to WebP

Resize and convert multiple images at once in your browser, with no upload.

Open tool Two website maps are next to each other, their test reports can be compared directly.

URL comparison

Compare two pages side by side: scores, key metrics and every individual check.

Open tool An article, a product and a company are combined into ordered data modules.

Create schema markup

Create JSON-LD structured data for businesses, articles, products and events.

Open tool