Color Wheel

Pick a color and its harmony, complementary, analogous and triadic, for balanced and distinctive designs.

LightLightnessDark
°

Harmony type

Palette

#8026D9

Base

#80D926

Complement

Shades of the selected color

Values of the selected color

HEX

#8026D9

RGB

rgb(128, 38, 217)

HSL

hsl(270, 70%, 50%)

CSS

hsl(270deg 70% 50%)

What is a color wheel?

A color wheel is a visual tool that arranges colors in a circle by their relationships, and it is used to pick colors that work together. It helps designers choose complementary palettes for designs, logos, social media and print. This wheel is built on the HSL model, which is the most accurate for screens.

What are the types of color harmony?

Complementary

Two colors opposite each other on the wheel, a strong and striking contrast. Ideal for headlines and buttons.

Analogous

Three neighbouring colors on the wheel, a calm harmony that is easy on the eye. Ideal for backgrounds.

Triadic

Three colors evenly spaced around the wheel, lively and balanced. Ideal for infographics.

Split complementary

A base color plus the two neighbours of its complement, more varied than a simple complementary pair.

Tetradic

Four colors forming a rectangle on the wheel, the richest palette but it needs careful balance.

How do you use the color wheel in Arabic design?

Start from a base color that carries your brand, then take its harmonies from the wheel. Arabic design has historically leaned on rich colors: deep purple, gold, emerald green and crimson red. In Andalusi you can apply any color from your palette straight onto your templates and designs.

Frequently asked questions

What is a color wheel?
A color wheel helps you pick colors that work together, based on color theory rules such as complementary, analogous and triadic harmonies.
What is the difference between complementary and analogous colors?
Complementary colors sit opposite each other on the wheel and create a sharp, striking contrast. Analogous colors sit next to each other and feel harmonious and calm.
How do I use triadic colors in a design?
Pick one color as the lead and use the other two in the triad as accent and background. Let one dominate and keep the other two in smaller, balanced amounts.
What is the difference between HEX, RGB and HSL?
HEX is the six character code used across the web and design tools. RGB describes a color as amounts of red, green and blue. HSL describes it as hue, saturation and lightness, which is the easiest to adjust by hand.
Can I use these colors in Andalusi?
Yes. Copy the HEX value of the color you picked and paste it straight into the color editor inside the Andalusi app.
What is hue?
Hue is a color’s position on the wheel, measured in degrees from 0 to 360. For example 0 is red, 120 is green and 240 is blue.

Put your palette on real designs

Open Andalusi and use the palette you picked across your templates.

Start designing free