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.892 0.042 275.12) | #d3daf8 | hsl(229, 73%, 90%) |
|
|
| 100 | oklch(0.842 0.063 273.99) | #bec9f5 | hsl(228, 73%, 85%) |
|
|
| 200 | oklch(0.792 0.084 273.12) | #a9b8f2 | hsl(228, 74%, 81%) |
|
|
| 300 | oklch(0.742 0.107 272.26) | #94a7ef | hsl(227, 74%, 76%) |
|
|
| 400 | oklch(0.690 0.131 271.85) | #7f95ec | hsl(228, 74%, 71%) |
|
|
| 500 | oklch(0.641 0.154 270.68) | #6a84e9 | hsl(228, 74%, 66%) |
|
|
| 600 | oklch(0.530 0.209 267.45) | #385be2 | hsl(228, 75%, 55%) |
|
|
| 700 | oklch(0.442 0.208 265.97) | #1d3fc3 | hsl(228, 74%, 44%) |
|
|
| 800 | oklch(0.360 0.164 266.09) | #152f91 | hsl(227, 75%, 33%) |
|
|
| 900 | oklch(0.272 0.117 267.06) | #0e1e5f | hsl(228, 74%, 21%) |
|
|
| 950 | oklch(0.179 0.061 268.98) | #070e2c | hsl(229, 73%, 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
