Color Palette Generator
Base color
Palette type
Share with friends
How to use
- 1 Enter a base color in #RRGGBB format (e.g., #FF5733). This anchors the palette.
- 2 Choose a harmony rule: complementary, analogous, triadic, tetradic, split-complementary, or shades.
- 3 Click Generate to view the palette with HEX, RGB, and HSL values for each swatch.
- 4 Click any swatch to copy the HEX code. Combine with WCAG contrast checks before using on text.
- 5 For dark-mode variants, regenerate with HSL lightness shifts (50% for light theme, 65–75% for dark theme accents).
About Color Palette Generator
FAQ
Q What's the best color palette for a startup brand?
Most startups benefit from analogous (low complexity) or split-complementary (one strong accent + supporting hues). Avoid full tetradic and triadic for early branding — they're hard to balance without a design system. Stripe, Linear, and Notion all use minimal 2-color analogous palettes plus neutral grays.
Q How do I create a dark mode version of my palette?
Take the same hues but increase lightness for accents (HSL L=70–80%) and reduce for backgrounds (L=10–15%). Don't simply invert — pure inversion produces harsh, eye-fatigue palettes. Material Design 3 and Apple Human Interface Guidelines both publish dark-mode color rules.
Q What is the difference between complementary and split-complementary?
Complementary uses two opposite hues (180° apart) — strong contrast but can be harsh. Split-complementary uses the base plus the two colors adjacent to its complement (150° and 210° offsets) — keeps strong contrast while being softer and easier to balance.
Q How many colors should be in a brand palette?
Typically 4–7 total: 1–2 primary, 1 accent, 2–3 neutrals (grays), and 2–3 semantic (success/warning/error). More than 7 distinct hues becomes visual noise. Material Design 3 recommends 5 core hues with systematic tonal variations on each.
Q Can I use any HEX color code as my base?
Yes — any 6-digit HEX (000000 to FFFFFF) works. For brand work, anchor to the color from your logo or hero element. For exploratory design, try a high-saturation mid-lightness color (HSL S=70%, L=50%) as a starting point.
Q How do I make sure my palette is accessible?
Test every text-on-background combination with a WCAG contrast checker. Aim for 4.5:1 minimum (AA) for body text, 3:1 for large text (18pt+). Many "beautiful" palettes fail accessibility because they use mid-saturation colors that look harmonious but lack contrast.
Q What is OKLCH and should I switch from HSL?
OKLCH is the modern perceptually uniform color space defined in W3C CSS Color Module 4. Equal lightness values look equally bright across hues — yellow at 50% L looks the same brightness as blue at 50% L, which HSL cannot guarantee. Use OKLCH for systematic palette generation; HSL is fine for casual color picking.
Q Why does my palette look different on different screens?
Color reproduction varies by display calibration, viewing angle, and color space. Most consumer screens are sRGB; Apple devices use Display P3 (wider gamut, more saturated colors). For brand-critical work, calibrate with a colorimeter (X-Rite, Datacolor) and reference printed Pantone swatches.
Official resources
W3C CSS Color Module Level 4
Authoritative W3C specification of CSS color spaces (HEX, RGB, HSL, OKLCH).
Material Design 3 — Color System
Google Material Design 3 systematic color guidelines including dark mode and accessibility.
WCAG 2.1 — Contrast Requirements
Web Content Accessibility Guidelines color contrast requirements (AA / AAA).
Adobe Color — Color Theory Reference
Adobe's color wheel and theory reference, the industry-standard digital design tool.