Free color combination generator: Good company.
Pick one color and four more follow it around the wheel. Judge them where they’ll live: on a poster, a page and a screen.
Good company presents
Out of the sea of same
Five colors. One poster.
Doors at eight
Turn the ring to move every color at once. Drag inside it to set lead’s lightness and chroma.
Type a hex, rgb(), hsl() or oklch(), then press Enter.
- OKLCH
- Hue
- 264°, blue
Every pairing, sorted.
Ten pairs from five colors, sorted by WCAG 2.2 AA contrast. Ratios are never rounded up across a line.
Text4
4.5:1 and up. Body copy, captions, links, labels.
- Ink on ground15.32:1 AAA
- Ink on spark10.29:1 AAA
- Lead on ground5.64:1
- Ink on support4.94:1
Large text only2
3:1 to 4.5:1. Headlines at 24px and up (18.66px bold), icons, borders.
- Lead on spark3.79:1
- Support on ground3.10:1
Decoration only4
Under 3:1. Shapes, backgrounds and flourishes nobody needs to read.
- Ink on lead2.72:1
- Support on spark2.08:1
- Lead on support1.82:1
- Spark on ground1.49:1
Each color, 50 to 950.
Eleven steps of even OKLCH lightness, hue held, chroma kept inside sRGB. Your color takes the step nearest its own lightness. Select a step to copy it.
Lead
Support
Spark
Ground
Ink
Take it with you.
Custom properties, a Tailwind v4 theme, JSON, or a link that opens this exact palette. The link holds the colors itself, so nothing is saved anywhere.
:root {
--lead: #2456d3;
--lead-50: #f3f7ff;
--lead-100: #dfeaff;
--lead-200: #c2d6ff;
--lead-300: #9dbdff;
--lead-400: #719eff;
--lead-500: #457cfd;
--lead-600: #2456d3;
--lead-700: #1745c2;
--lead-800: #0f3395;
--lead-900: #092368;
--lead-950: #051543;
--support: #ed4b9b;
--support-50: #fff3f7;
--support-100: #ffe0eb;
--support-200: #ffc2d9;
--support-300: #ff99c3;
--support-400: #ff5caa;
--support-500: #ed4b9b;
--support-600: #be1274;
--support-700: #9b005c;
--support-800: #760045;
--support-900: #53002f;
--support-950: #37001d;
--spark: #febf12;
--spark-50: #fff6e4;
--spark-100: #ffe7b7;
--spark-200: #febf12;
--spark-300: #efb300;
--spark-400: #cc9800;
--spark-500: #aa7e00;
--spark-600: #896500;
--spark-700: #6d5000;
--spark-800: #533b00;
--spark-900: #392800;
--spark-950: #251800;
--ground: #fbf0f4;
--ground-50: #fbf0f4;
--ground-100: #ede8ea;
--ground-200: #ddd3d6;
--ground-300: #c4bbbe;
--ground-400: #a89fa2;
--ground-500: #8c8387;
--ground-600: #72696c;
--ground-700: #5b5356;
--ground-800: #443e40;
--ground-900: #2f2a2b;
--ground-950: #1d1a1b;
--ink: #002119;
--ink-50: #edfaf6;
--ink-100: #daefe8;
--ink-200: #badfd4;
--ink-300: #a3c7bc;
--ink-400: #87ab9f;
--ink-500: #6c8f84;
--ink-600: #52746a;
--ink-700: #3c5d53;
--ink-800: #2c463e;
--ink-900: #1d302a;
--ink-950: #002119;
}Questions
Combinations, explained.
A rule for choosing hues by where they sit on the color wheel. Complementary takes the opposite hue, analogous takes the neighbors, triadic spaces three hues evenly, split complementary takes the two hues either side of the opposite, tetradic takes four a square apart, and monochrome keeps one hue and changes only lightness and chroma. A harmony gets you started. Lightness, and how much of each color you use, decide whether it works.
OKLCH is built so equal steps look like equal steps. In HSL, a yellow and a blue at the same lightness look nothing alike; in OKLCH they come out close. That keeps harmonies honest as you turn the wheel, and it keeps the 50 to 950 scales even. The field inside the ring shows only the colors a normal sRGB screen can show, so the edge you push against is real.
They’re the WCAG 2.2 AA contrast lines. Text pairs reach 4.5:1 and are fine for body copy. Large text only pairs reach 3:1, which is enough for text at 24px and up (or 18.66px bold), and for icons, input borders and focus rings. Decoration only pairs are under 3:1: fine for shapes and backgrounds, never for words someone needs to read. Ratios are never rounded up across a line.
Shuffle makes a new palette in the harmony you’ve chosen. A locked color stays exactly as it is through shuffles, harmony changes and turns of the ring, and the rest arrange themselves around it. Undo steps back, and Earlier keeps the palettes you’ve passed so you can bring one back.
Each color gets eleven steps of even OKLCH lightness at its own hue. Chroma is kept, tapered a little toward white and black, and never pushed outside sRGB. Your color takes the step closest to its own lightness, so the scale always contains the color you chose.
No. Everything runs in your browser. The palette lives in the page’s address so you can share it or come back to it, and nothing is sent to us beyond the site’s normal visit analytics.
Five colors is a start.
A story needs a palette that holds up on a sign, a screen and a form at the counter. We build identities and the design systems that carry them, accessible from the first swatch.