Color Theory
Pick a base color and explore seven classic harmony schemes. Copy any swatch as HEX, RGB, HSL, or OKLCH.
Hue positions
Paste a HEX value, use the swatch picker, or start from the default violet. The base color is the anchor that all harmony relationships rotate around.
Switch between seven classic color theory schemes. The wheel preview shows where each derived hue sits relative to the base.
Copy any swatch as HEX, RGB, HSL, or OKLCH. The share button stores the base color and scheme in the URL so a teammate sees the same palette.
The names are familiar, but the useful part is knowing when each relationship helps. Use these descriptions as design direction, not as a rulebook.
Two colors sit opposite each other on the wheel. The result is direct contrast, useful for calls to action, posters, product badges, and any interface moment where one element must separate from another quickly. Use one color as the main surface and the opposite hue sparingly. Equal amounts can feel loud.
Three neighboring hues create a calm family. Analogous palettes are good for editorial pages, dashboards, gradients, and illustration systems where you want variety without a strong conflict. Because hue contrast is low, build hierarchy with lightness and saturation instead of expecting the colors alone to do the work.
Three colors spaced 120 degrees apart make a balanced but energetic palette. Triads are excellent for playful products, data categories, and brand systems that need more than one accent. Pick one dominant hue, use the second as support, and reserve the third for highlights or charts.
A tetradic palette uses two complementary pairs. It gives you broad coverage across warm and cool hues, but it needs discipline. Keep one pair quiet and let the other pair carry emphasis. This is useful for event branding, illustration kits, and marketing systems with multiple campaign moods.
Split-complementary keeps the punch of a complement but softens the conflict by using two neighbors around the opposite hue. It is often easier to use than a pure complementary pair because the two support colors create richer transitions and fewer harsh edges.
Square palettes use four evenly spaced hues. They are symmetrical and flexible, but also the easiest to overuse. Treat the result as a menu of options. Choose one or two for core UI, then reserve the rest for chart series, illustrations, labels, or seasonal accents.
A monochromatic palette changes lightness around one hue. It is the simplest choice for product UI, documentation, skeleton states, and brand surfaces where consistency matters. The downside is limited semantic range, so pair it with neutrals or status colors when information density increases.
Why OKLCH
Traditional color wheels usually rotate hue in HSL or HSV. That is easy to teach, but it does not match how people see brightness. The same HSL lightness value can produce a bright yellow, a heavy blue, and a red that sits somewhere between them. A harmony based on that math can look uneven even when the angles are correct.
OKLCH separates perceptual lightness, chroma, and hue. This tool keeps the base color's lightness and chroma as stable as the sRGB gamut allows, then rotates hue. When a rotated color would clip outside displayable sRGB, the tool reduces chroma along the same hue rather than shifting the relationship.
That approach is especially useful for monochromatic and triadic palettes. Your output still needs design judgment, contrast checks, and likely tonal scales, but the first draft is closer to how a human reviewer expects the colors to feel.