Color Wheel Toolv1.0.0

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° 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° 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° intervals, 16 colors at 22.5° 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 when standard rules do not fit a design vision for complete creative control. Example: Pink, turquoise, and gray or choose your own adventure. Alternatively, mix color harmonies by locking the swatches you want to keep from one color harmony and selecting a new one to combine new colors and complement your existing colors. Example: Pick Triad color harmony, lock the color swatches you like most and switch the harmony type to Complementary.

Saving: Save the colors on screen as a named palette. A saved palette keeps the whole setup, not just the colors: its color mode, harmony, base swatch, swatch count, and which individual swatches were locked. Save overwrites the palette you are in; Save As New keeps both.

Switching: The Saved Palette dropdown appears above Color Mode once there is more than one palette to move between, and loading one restores its color mode and harmony along with its colors. Different palettes can therefore sit in different color modes. Below two palettes the name is shown as plain text instead, since there is nothing to choose between.

Locking: A locked palette is read-only. The wheel, the hex fields, the swatch buttons, Color Mode, Color Harmony, Max Swatches, and Add Swatch are all disabled until you unlock it, so an approved palette cannot be changed by accident. Locking a palette is separate from locking a single swatch: a swatch lock protects one color inside a palette while you keep working, a palette lock protects the whole thing.

Unsaved changes: A dot beside the palette name, and an "Unsaved changes" note in the status line, means the colors on screen have drifted from the saved copy. Loading another palette, importing over the top, or resetting will ask before discarding them. Saving a palette whose colors already match one you have kept asks before making a second copy.

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 is held 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 you can look at it and then keep it, undo it, or move on.

Organising: The Manage panel lists every palette. Pin one to hold it at the top, use the arrows to swap a palette with its neighbour, and add optional notes and tags to record what a palette is for or who signed it off.

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

Where they are stored: Saved palettes live in this browser only. They are not synced to an account or shared between devices, and clearing site data removes them. Export JSON for a copy you control. Up to 50 palettes can be saved at once; delete one to make room.

The palette can be written out in the shape the receiving tool actually reads, rather than as hex codes to retype. A name prefix sets the variable names, so a palette becomes --brand-1 rather than --color-1 where that fits your 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 is downloaded rather than previewed or copied.

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.

Use the color wheel to set a base hue and create a palette that follows a selected harmony rule. Adjust swatches in RGB, HSL, or Lab space to match your workflow. Lock any color swatch you want to keep. Reorder swatches with drag and drop to fit design priorities. Save the result as a named palette, switch between saved palettes from the dropdown above Color Mode, and lock a finished palette so it cannot be edited by accident. Undo and redo cover every change, and each save keeps the version it replaced so you can go back to it later. Saved palettes are held in this browser only, so export JSON for a copy you control. Enable the contrast checker to evaluate text-on-background pairs and view warnings for common color-vision deficiencies. Export your final palette as PNG for presentations, or as JSON for a single palette or your whole saved library.

Follow these steps to build an effective, accessible palette:

• Pick a Color Mode (RGB, HSL, or Lab) to match your tools and mental model.
• Select a Harmony (Analogous, Monochromatic, Triad, Complementary, Split Complementary, Tetradic, Pentadic, Square, Compound, Equidistant Hue, Saturation Ramp, Tint-Tone-Shade, Warm-Cool Split, or Shades) to structure relationships.
• Click the wheel to set the base hue; adjust saturation by distance from center.
• Add swatches; lock colors you want to preserve; drag to reorder; set a new “Base” when needed.
• Edit a hex value by clicking the field and typing; the leading hash stays fixed. Double-click the field to select the value and copy it to the clipboard. Copying works on locked swatches too, and never changes the color.
• Toggle the Contrast Checker to evaluate pairs against WCAG.
• Click Save Palette to keep the current colors under a name. Use Save As New to branch a variation, Rename to retitle one, and Delete to remove it.
• Pick a palette from the Saved Palette dropdown above Color Mode to switch between them. Each one restores its own color mode and harmony.
• Use Lock Palette to make a finished palette read-only. Unlock it before editing, renaming, or deleting.
• Undo and Redo step back and forward through color, mode, harmony, and swatch changes. Ctrl+Z and Ctrl+Y do the same.
• Open Manage to pin and reorder palettes, add notes and tags, restore an earlier saved version, or compare two palettes.
• Choose Developer Formats to generate CSS, SCSS, Less, Tailwind, design tokens, SVG, CSV, a GIMP palette, or an Adobe swatch file, then copy or download it.
• Export as PNG for handoffs, JSON for the current palette, or All Palettes for the whole saved library. Import brings a palette back, adds its swatches to the current one, or files it straight into your saved palettes.

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°; Triad = base ± 120°; Split Complementary = base ± (180° − 30°); Tetradic = base + {0°, 60°, 180°, 240°}; Square = base + {0°, 90°, 180°, 270°}; Equidistant Hue = base + (360° / N) 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° and cool hues 180°-270° at fixed S and L.
• Perceptual difference (Lab): ΔE₇₆ = √((ΔL)² + (Δa)² + (Δb)²). Flag low distinguishability when Δ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 Δ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.

Reduce iteration time, improve accessibility compliance, and keep visuals consistent across platforms. Validate color choices early, avoid rework, and ship polished interfaces with confidence.