Color Wheel Tool

RGB: Red, Green, Blue. Default additive color model used in digital displays. Commonly used for screens, websites, and digital graphics.

HSL: Hue, Saturation, Lightness. Intuitive for adjusting color properties. Useful for designers who need precise control over color tones and brightness.

Lab: Perceptually uniform color space, useful for color differences. Often used in professional editing to ensure accurate and consistent color correction.

Analogous: Adjacent colors on the wheel, creating a cohesive look (e.g., UI gradients) that blend well. Great for soft, visually pleasing designs with natural flow. Example: Blue, teal, and green

Monochromatic: Single color variations, ideal for minimalistic designs. Commonly applied in branding or interfaces that need a clean, unified feel. Example: Lighter and darker shades of blue

Triad: Three evenly spaced colors on the color wheel, vibrant and balanced (e.g., logos). Effective for creating strong visual contrast in logos and designs while keeping harmony. Example: Red, yellow, and blue

Complementary: Opposite colors on the color wheel, strongest contrast (e.g., call-to-action buttons). Frequently used to draw attention and highlight important elements. Example: Blue and orange

Complementary + Tints: Base color, its complement, plus lighter tints of both colors. Creates a softer variation of complementary harmony with more range for subtle accents. Example: Blue, orange, light blue, and light orange

Tetradic: Two pairs of complementary colors forming a rectangle on the color wheel. Offers rich variety while maintaining balance through complementary relationships. Works well for complex designs needing multiple accent colors. Example: Blue and orange paired with yellow-green and red-violet

Pentadic: Five colors evenly spaced around the color wheel (72 degrees apart). Creates vibrant, diverse palettes ideal for playful or energetic designs. Requires careful balance to avoid overwhelming the viewer. Example: Red, yellow, green, blue, and purple

Split Complementary: Base color plus two next to its opposite on the color wheel for versatile contrast. A practical choice for balance when pure complementary contrast is too strong. Example: Blue (base color), red & orange, and yellow & orange

Square: Four colors evenly spaced around the color wheel, dynamic schemes (e.g., branding). Popular for bold designs with varied palette that require variety without losing harmony. Example: Red, yellow-green, blue and violet

Compound: Combines complementary and analogous colors. Useful for complex designs that need both contrast and depth, giving designers rich palettes that feel balanced but visually interesting. Example: Blue with red-orange and orange

Equidistant Hue: Evenly spaces hue values around the full 360-degree color wheel while keeping saturation and lightness fixed. Produces maximally distinct, perceptually balanced qualitative palettes that scale to any swatch count. Ideal for data visualization, categorical color coding, and large palettes where every color needs equal visual weight. Example: 8 colors at 45-degree intervals, 16 colors at 22.5-degree intervals

Saturation Ramp: Keeps hue and lightness fixed while evenly distributing saturation from near-gray to full intensity. Produces a single-hue intensity scale ideal for UI states, background layers, and building depth without introducing new hues. Example: Pale washed-out blue through to vivid saturated blue

Tint-Tone-Shade: Generates three progressions from a single hue: tints (adding white, increasing lightness), tones (adding gray, decreasing saturation), and shades (adding black, decreasing lightness). Provides a complete single-hue color system for brand palettes and design tokens. Example: Light sky blue (tint), muted steel blue (tone), dark navy (shade)

Warm-Cool Split: Divides the palette into two temperature groups distributed evenly within warm hues (reds, oranges, yellows) and cool hues (greens, blues, purples), anchored at the base color's saturation and lightness. Creates natural visual tension useful for illustration, editorial design, and compositions that need temperature contrast. Example: Half warm (coral, amber, gold) and half cool (teal, azure, indigo)

Shades: Different light or dark variations of a single color. Often applied to add depth and dimension, highlight layers, create shadows or create hierarchy without introducing multiple colors. Example: Pale green, medium green, and forest green

Custom: Manual color selection without automatic harmony, for a design vision that standard rules do not fit. Example: Pink, turquoise, and gray, or any combination chosen by hand. Harmonies can also be mixed: locking the swatches worth keeping from one harmony before switching to a different harmony type carries those colors forward and combines them with the new set. Example: generate a Triad scheme, lock the preferred swatches, then switch the harmony type to Complementary.

Saving: A named palette records more than its colors: its color mode, harmony, base swatch, swatch count, and which individual swatches are locked are all part of the save. Overwriting the current palette and branching a new copy from it are both supported, so a variation can be kept alongside the original.

Switching: Loading a different saved palette restores its own color mode and harmony along with its colors, so separate palettes can each sit in a different color mode. With only one saved palette there is nothing to switch between.

Locking: A locked palette is read-only: none of its colors, mode, harmony, or swatch count can be changed until it is unlocked, which protects an approved palette from accidental edits. Locking a whole palette is distinct from locking a single swatch, which protects one color while the rest of the palette is still being adjusted.

Unsaved changes: A palette whose colors have drifted from its saved copy is flagged as having unsaved changes. Loading another palette, importing over the current one, or resetting prompts for confirmation before those changes are discarded, and saving over a palette whose colors already match a different saved palette asks first, to avoid creating an accidental duplicate.

Undo and version history: Undo and redo cover every change to the colors, mode, harmony, base swatch, and swatch count, with a burst of typing in one field counting as a single step. That history lasts for the session only. Each save additionally keeps the version it replaced, up to ten per palette, and those survive a reload. Restoring an earlier version puts it on screen without overwriting the saved record, so it can be reviewed and then kept, undone, or set aside.

Organising: Every saved palette can be pinned to hold it at the top of the list, reordered relative to its neighbours, and annotated with notes and tags recording what it is for or who approved it. Palettes can also be filed into named groups, so a set of brand colors stays separate from a set kept for inspiration. A palette belongs to one group at a time, the way an asset belongs to one library: filing it somewhere new takes it out of where it was. Filing happens by dragging a palette onto a group heading, or from a dropdown on each row. Each heading is the group: it carries the name, the member count, and the rename and delete controls, and an empty group keeps its heading so there is somewhere to drag into. Any saved palette can be renamed in place without loading it first, and so can any group. Groups are optional, and a library that never creates one looks exactly as it did before. Deleting a group keeps its palettes and returns them to Ungrouped. A search box matches on name, group, tag, note and hex value at once, so a color remembered only as "the red the client approved" is still findable.

Comparing: Two palettes can be set side by side, pairing their swatches in order and reporting the perceptual difference between each pair along with the contrast ratio between them. A small delta E means two colors are hard to tell apart, which matters when one palette is meant to replace another.

Where they are stored: Saved palettes live in the browser only. They are not synced to an account or shared between devices, and clearing site data removes them. Up to 50 palettes can be saved at once; deleting one makes room for another.

Moving palettes between browsers: Two different exports answer two different questions. Export This Palette writes the one palette on screen. Export Library writes every saved palette, every group, and which palette sits in which group. Merging a file back in adds to what is already saved rather than replacing it, so a single palette exported months ago can be brought into a library built since. A palette already held under the same name and the same colors is reported as already present instead of being added twice; the same name with different colors is treated as a different palette and kept alongside. Library files are named with the date first so a folder of them sorts chronologically, followed by the first three palette names, or by a count when those names run long. Every export, image or data, ends with a four-digit sequence number so repeated exports do not overwrite each other; a setting turns that numbering off for all of them when filenames need to stay stable.

Two colors minimum: A palette describes a relationship between colors, so one color is not a palette. The remove control stops at two, and a file carrying fewer is padded up to two rather than rejected.

The palette can be written out in the shape the receiving tool actually reads, rather than as hex codes to retype by hand. A name prefix sets the variable names, so a palette becomes --brand-1 rather than --color-1 where that fits a codebase better.

CSS custom properties: A :root block with one variable per swatch, each annotated with its RGB values.

SCSS and Less: One variable per swatch, plus an SCSS list holding the whole palette for iteration.

Tailwind config: A theme.extend.colors block ready to paste into a Tailwind configuration file.

Design tokens: JSON in the W3C design token shape, each entry carrying its type and value, for token pipelines and cross-platform theming.

SVG: A vector swatch strip with the hex code under each color, for documentation and slides.

GIMP palette and Adobe swatch exchange: Native palette files for GIMP, Inkscape, and Adobe applications. The Adobe format is binary, so it downloads directly rather than displaying inline.

CSV and plain hex list: Spreadsheet-ready rows carrying hex, RGB, HSL, and which swatch is the base or locked, or just the hex codes one per line.

A color wheel tool builds a palette from one base hue and a chosen harmony rule, the geometric relationship between hues (opposite, evenly spaced, or clustered, as detailed above) that keeps a set of colors balanced. Working in RGB, HSL, or Lab color space changes which values are adjusted directly: RGB channels, hue/saturation/lightness, or perceptually uniform Lab coordinates.

Any swatch can be locked to hold it fixed while the rest of the harmony recalculates around it, reordered by dragging to match a design's priority, or set as the new base color for the harmony. A hex value can be edited directly, and double-clicking a field selects and copies its value to the clipboard even when the swatch is locked, without changing the color.

A finished palette can be saved under a name, switched between other saved palettes, and locked so it cannot be edited by accident, with the full behaviour described under Saved Palettes above. Undo and redo, including the keyboard shortcuts Ctrl+Z and Ctrl+Y, step back and forward through every change to color, mode, harmony, and swatch count. The Manage panel handles pinning, reordering, grouping by drag or dropdown, renaming any palette or group in place, search across the whole library, notes and tags, restoring an earlier saved version, and comparing two palettes. A contrast checker evaluates text-on-background pairs against WCAG thresholds and flags common color-vision deficiencies.

A finished palette exports as PNG for a visual handoff, as JSON for a single palette or the entire saved library, or in any of the developer formats described above (CSS, SCSS, Less, Tailwind config, design tokens, SVG, CSV, a GIMP palette, or an Adobe swatch file). Importing a palette back in adds its swatches to the current one or files it directly into the saved library.

Formulas and logic used (plain text):

• HSL↔RGB: standard conversions. Example RGB→HSL uses max/min channels; L=(max+min)/2; S and H computed by channel deltas.
• Contrast Ratio: (L1 + 0.05) / (L2 + 0.05), where L is relative luminance from linearized sRGB: L = 0.2126R + 0.7152G + 0.0722B.
• WCAG thresholds: AA normal text ≥ 4.5:1; AA large text (≥18 pt or ≥14 pt bold) ≥ 3:1; AAA normal text ≥ 7:1.
• Color Harmony angles (examples): Complementary = base ± 180 degrees; Triad = base ± 120 degrees; Split Complementary = base ± (180 - 30 degrees); Tetradic = base + {0, 60, 180, 240} degrees; Square = base + {0, 90, 180, 270} degrees; Equidistant Hue = base + (360 / N) degrees per swatch at fixed S and L; Saturation Ramp = fixed H and L, S from 5% to 100%; Tint-Tone-Shade = tints (L up), tones (S down), shades (L down) in thirds; Warm-Cool Split = warm hues 0-90 degrees and cool hues 180-270 degrees at fixed S and L.
• Perceptual difference (Lab): Delta E76 = square root of (Delta L)^2 + (Delta a)^2 + (Delta b)^2. Flag low distinguishability when Delta E is small (for example, < 10).

Apply the Color Wheel Tool across product design, branding, web development, and content creation to generate reliable, on-brand palettes that read well on screens and in print.

• Branding and identity: Create a primary brand hue and derive supporting accent, neutral, and feedback colors using Complementary, Triad, or Tetradic harmonies. Export JSON to seed a design token system.
• UI and accessibility: Build button, link, and background sets; verify text contrast with WCAG thresholds; simulate color-vision deficiencies to reduce misclassification of status colors.
• Design systems: Define semantic roles (Primary, Secondary, Success, Warning, Danger, Info) as swatches; lock approved tones; save each theme as its own palette and lock the signed-off one so it cannot drift; export design tokens or CSS custom properties straight into the codebase, and PNG for the documentation site.
• Marketing and presentations: Produce cohesive slide themes; generate Analogous gradients; ensure CTA colors pass contrast on light and dark backgrounds.
• Data visualization: Assemble distinguishable series colors with Lab delta E checks; prefer Split Complementary or Square sets for categorical charts.
• Illustration and art direction: Explore Monochromatic and Shades for value studies; use Pentadic for vibrant editorial palettes while controlling saturation and lightness.
• Agency and client work: Keep one client's approved brand colors in their own group, separate from a group of reference palettes gathered for pitching, so a signed-off scheme is never confused with an exploratory one. Searching the library matches on palette name, group, tag, note and hex value at once, which finds a color remembered only as the red approved last quarter.
• Moving work between machines: Export the whole library, including groups and which palette sits in which group, then merge it into another browser. Merging adds to what is already saved rather than replacing it, and a palette already held under the same name and colors is reported instead of duplicated, so the same file can be merged twice without cleanup.
• Print and paint workflows: Export a GIMP palette for Inkscape or an ASE file for applications that read Adobe swatch exchange, so screen-chosen colors carry into artwork tools without retyping hex values.
• Video and encoder work: Derive title-card and lower-third colors from one base hue, then check each pair against WCAG thresholds before the text lands over moving footage where contrast matters more than it does on a static page.

Across these, the two checks worth running before a palette leaves the tool are contrast against the backgrounds it will actually sit on, and perceptual distance between any two colors that must stay distinguishable. A pair can look separated on a wheel and still collapse for a viewer with deuteranopia, or clear the eye and fail a 4.5 to 1 text threshold.