From one color to a full palette
Start with the Color Palette Generator: press the space bar to generate, lock the colors you like, and choose a harmony such as analogous or complementary. If a client already has a photo, logo or product shot, the Palette From Image tool extracts the dominant colors so the site matches what they already use.
A brand rarely needs just one shade. The Tailwind Shade Generator turns a single brand color into a 50 to 950 scale for backgrounds, borders, hover states and text, ready to paste into a Tailwind config or CSS custom properties.
Contrast and accessibility
Color is where most accessibility failures start. WCAG 2.1 AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface elements. The WCAG Contrast Checker tests any pair and suggests the nearest passing color, and the ADA Compliance Checker finds every low-contrast element on a live page.
Converting between color formats
Design tools, CSS and frameworks all speak slightly different color languages. The Color Converter moves between HEX, RGB, HSL and OKLCH in both directions. OKLCH is worth learning: its lightness value matches how bright a color looks to people, which makes building consistent shade scales and hover states much easier.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
Normal text needs at least 4.5:1 against its background. Large text (24px and up, or 19px bold) and essential interface parts such as input borders and icons need at least 3:1.
What is OKLCH and should I use it?
OKLCH is a CSS color format built on how people perceive lightness, chroma and hue. It is supported in all modern browsers and makes it easier to create shades that look evenly spaced. HEX and RGB still work everywhere, so many teams keep HEX for brand colors and use OKLCH for generated scales.
How many colors should a website palette have?
Most sites need one or two brand colors, a neutral scale for text, backgrounds and borders, and a few state colors for success, warning and error. Generate shade scales from the brand colors rather than adding unrelated new hues.