Skip to content
Kolorvia

Color Palettes

Hand-curated palettes with real use-case notes, plus documented brand color sets — every one exportable as CSS variables, SCSS, or Tailwind config in one click.

Brand palettes are documented for reference and education. All trademarks and brand identities belong to their respective owners; no affiliation or endorsement is implied.

A palette is a system, not a mood board

Assign roles before falling in love

A usable palette has jobs, not just colors: a dominant tone that covers most of the surface, a neutral that carries text and backgrounds, and one accent that earns attention by being rare. The classic 60-30-10 split is a starting ratio, not a law — but if your "accent" is covering 40% of the screen, it has stopped being an accent. Notice how Midnight UI names its colors by role, not by hue.

Contrast is part of the palette

A palette that only works as decorative stripes isn't finished — every real design needs at least one text-on-background pairing that passes WCAG AA. Each palette page here shows every color's contrast against black and white so you can spot the text-capable colors at a glance, and the blindness simulator catches pairings that collapse for the roughly 1-in-12 men with a color vision deficiency.

Steal the structure, not the colors

The most useful thing about a brand palette is rarely its exact hexes — it's the pattern: usually one saturated signature color doing all the talking while disciplined neutrals do the work. Copy that structure with your own hue. Start from the color wheel to pick the signature, then let the generator derive the supporting cast from real harmony math.

Frequently asked questions

Open any palette and hit 'Export colors' — you get the set as CSS variables, SCSS variables, a Tailwind config block, or a plain list, in HEX, RGB, HSL, or OKLCH. Every individual swatch also links to that color's full page with all conversions.

They document publicly known brand color values for reference and education. The trademarks and brand identities belong to their respective owners — nothing here implies affiliation or endorsement, and using another company's brand identity in your own commercial work may need their permission.

Three roles cover most real interfaces: a dominant color, a neutral for text and backgrounds, and an accent. Five values is a comfortable ceiling for most projects — beyond that, you're usually maintaining shades of the same few hues, which the palette generator can derive on demand instead.

Curated palettes are hand-assembled here, each with use-case notes, from verified color values. Generated palettes come out of the palette generator tool — every generator result has its own shareable URL, so a palette you build from your brand color is one link away from being saved anywhere.

Accessibility belongs to pairings, not palettes — the same five colors can be used accessibly or terribly. Each palette page shows every color's contrast ratio against black and white as a starting map; test your actual text-on-background combinations in the contrast checker before shipping.

Ready to find your perfect palette?

Start from any color and let real color theory do the rest — or warm up with today's puzzle.

Generate a palette → Play Color Match

We use cookies for site preferences and, where enabled, Google Analytics and Google AdSense — which may use cookies to personalize ads based on your visits here and elsewhere. See our Privacy Policy for details. Your color tool inputs are never sent to us regardless of your choice.