Variations
Monochrome, Shades, Tints, Tones and Hues scales of your chosen color.
Monochrome
Monochromatic color scales consist of variations of a single color, achieved by adjusting brightness or saturation.
Shades
Shades are darker versions of a color produced by adding black, adding richness and depth to the original hue.
Tints
Tints are lighter shades of a color created by adding white, offering a soft and pastel appearance.
Tones
Tones, created by adding black and white, result in muted versions of a color for a sophisticated and subdued palette.
Hues
Hues are the purest, intense forms of colors found on the color wheel, serving as base colors for tints, tones, and shades.
Tailwind color scales
Browse Tailwind CSS color scales. Copy OKLCH, HEX, or HSL with one click. Preview colors in real UI examples and check contrast for accessibility.
| 50 | oklch(0.895 0.044 303.08) | #e2d6f5 | hsl(263, 61%, 90%) |
|
|
| 100 | oklch(0.778 0.094 301.16) | #c1a9ea | hsl(262, 61%, 79%) |
|
|
| 200 | oklch(0.661 0.147 300.12) | #a17bde | hsl(263, 60%, 68%) |
|
|
| 300 | oklch(0.549 0.195 296.75) | #804ed3 | hsl(263, 60%, 57%) |
|
|
| 400 | oklch(0.458 0.203 294.05) | #632eba | hsl(263, 60%, 45%) |
|
|
| 500 | oklch(0.378 0.163 294.46) | #4b238d | hsl(263, 60%, 35%) |
|
|
| 600 | oklch(0.341 0.144 294.52) | #401e79 | hsl(262, 60%, 30%) |
|
|
| 700 | oklch(0.304 0.125 295.37) | #361965 | hsl(263, 60%, 25%) |
|
|
| 800 | oklch(0.264 0.105 295.60) | #2b1451 | hsl(263, 60%, 20%) |
|
|
| 900 | oklch(0.224 0.084 295.88) | #200f3d | hsl(262, 61%, 15%) |
|
|
| 950 | oklch(0.183 0.061 297.95) | #160a29 | hsl(263, 61%, 10%) |
|
Harmonies
Monochrome, Shades, Tints, Tones and Hues scales of your chosen color.
Triad
Three evenly spaced colors on the color wheel, creating a balanced palette with vibrant contrast.
Analogous
Adjacent colors on the color wheel, resulting in a cohesive and calming palette with subtle variations.
Complementary
Colors directly opposite each other on the color wheel, creating a dynamic and high-contrast palette.
Split complementary
Base color and the two adjacent to its complement, achieving both contrast and harmony.
Square
Four colors evenly spaced on the color wheel, offering diverse palette with balanced contrast.
Tetradic
Four colors evenly spaced on the color wheel, offering a diverse palette with balanced contrast.
Contrast score
WCAG contrast ratio checker between two colors.
Color blindness simulator
Simulate the colors impact across different types of color blindness.
Protanopia
Red-Green color blindness - Can't see reds
Protanomaly
Red-Green color blindness - Trouble distinguishing reds
Deuteranopia
Red-Green color blindness - Can't see greens
Deuteranomaly
Red-Green color blindness - Trouble distinguishing greens
Tritanopia
Blue-Yellow color blindness - Can't see blues
Tritanomaly
Blue-Yellow color blindness - Trouble distinguishing blues
Achromatopsia
Total color blindness
Achromatomaly
Total color blindness
Related palettes
Discover more palettes with a similar mood and vibe - Browse our collection
