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.

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. 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 JSON for saving or importing new color themes.

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.
• Toggle the Contrast Checker to evaluate pairs against WCAG.
• Export as PNG for handoffs or JSON for importing and exporting.

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; export PNG for the system 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.