Color Palette Extractor

How This Tool Works

Operation: The Color Palette Generator creates harmonious colour schemes using geometric relationships on the HSL (Hue, Saturation, Lightness) colour wheel. The core algorithm works as follows:

• Base Colour Input: User selects a base colour via a colour picker, which provides a hex value (#RRGGBB). The tool converts hex to RGB using parseInt(hex, 16) and extracts R, G, B values.
• HSL Conversion: RGB values are converted to HSL using standard colour-space transformation formulas, yielding the base hue (0–360°), saturation (0–100%), and lightness (0–100%).
• Harmony Rules:
  • Complementary: Adds 180° to the base hue
  • Analogous: Takes colours at ±30° and ±60° from the base hue
  • Triadic: Takes colours at ±120° from the base hue
  • Split-Complementary: Uses the complement ±30°
  • Monochromatic: Varies only saturation and lightness, keeping hue constant
  • Square: Takes colours at 0°, 90°, 180°, and 270°
  • Custom: Allows user-defined hue offsets
• Output: Each generated colour is displayed as a hex code, RGB value, and visual swatch. The palette can be exported as CSS custom properties.

Key Benefits of Using the Color Palette

• Instant harmony generation: Select any base colour and instantly see 6–8 complementary colours using proven geometric colour theory. No design expertise needed — the tool applies established colour harmony rules automatically.
• 7 harmony rules + custom: Complementary, analogous, triadic, split-complementary, monochromatic, square, and custom offsets. Each rule produces a professional-grade colour scheme ready for UI design, branding, or data visualisation.
• CSS variable export: Export your palette as CSS custom properties (--color-primary, --color-secondary, etc.) with hex and RGB values — directly copy-pasteable into your stylesheet for consistent theming.

Practical Real-World Use Cases

• UI designers creating brand colour systems: A designer starting a new brand identity can pick a primary colour (e.g., #3B82F6 — blue), and generate complementary, analogous, and triadic palettes to build a complete colour system: primary, secondary, accent, and neutral tones.
• Data visualisation developers: A developer building a chart library can generate a triadic or square palette of 4–6 distinct colours that are mathematically guaranteed to be visually distinguishable — essential for categorical data colour-coding.
• Web developers implementing dark/light modes: A developer using the monochromatic rule on a base colour can generate a full range of shades from lightest to darkest, mapping them to background, surface, and text colours for a cohesive theme.

Frequently Asked Questions (FAQ)

Can I save multiple palettes?

Not persistently — the tool generates one palette per session. To save palettes, export the CSS variables and save them in your project's stylesheet, or take screenshots of the colour swatches for reference.

How do I ensure colour accessibility (WCAG contrast)?

The tool generates colours based on hue relationships but does not automatically check contrast ratios. After generating a palette, verify text/background pairs using a contrast checker to ensure they meet WCAG AA (4.5:1) or AAA (7:1) requirements.

Will the colours look different on different screens?

Yes — colour rendering varies across monitors (IPS vs. TN, calibrated vs. uncalibrated), devices (OLED vs. LCD), and ambient lighting. Use hex/RGB values, which provide a consistent colour specification, for production use.