A reliable colour picker is a fundamental tool for designers and developers — choosing precise colours, converting between formats, and generating related colour variations. The Utility Spark Colour Picker provides a full HSL/HSV colour wheel and gradient canvas for visual colour selection, with real-time output in all four standard formats: Hex (for web/CSS), RGB (for CSS and design software), HSL (for perceptual colour reasoning and CSS), and CMYK (for print production). Select a colour visually, or enter any value in any format and all others update. Generate a range of shades (darker) and tints (lighter) for the selected colour to build a design system palette instantly.
lightbulb When to use this tool
- check_circle Picking an exact brand colour from a hex code and seeing its RGB and HSL equivalents for use in CSS variables.
- check_circle Generating a full shade/tint scale from a single brand colour for a design system.
- check_circle Converting a CMYK print colour to hex/RGB for digital use.
- check_circle Exploring colour relationships — adjusting hue, saturation, and lightness to find harmonious palette options.
Why use our tool?
Four Format Outputs — Hex, RGB, HSL, CMYK
All four colour representations update simultaneously. Enter any format and all others follow. Copy whichever format your specific context requires — hex for CSS variables, RGB for design software, CMYK for print production briefs.
Shade and Tint Scale Generation
Generate 5–10 shades (adding black to darken) and tints (adding white to lighten) for any selected colour. These form the foundational colour scale for a design system — exactly the type of scale used by Tailwind CSS (50, 100, 200... 900 variants).
Colour Harmony Suggestions
View complementary, analogous, triadic, and split-complementary colour suggestions based on the selected colour. These are calculated from the HSL hue wheel and provide starting points for palette exploration.
How it works
Click anywhere on the colour canvas to select a colour visually, or enter a specific hex/RGB/HSL value.
The colour appears with all four format values displayed.
Click 'Generate Shades/Tints' to see the full lightness scale.
Click any colour value to copy it to clipboard.
Explore colour harmonies using the harmony panel.
Examples
science Brand Blue Colour Scale
Input: #3B82F6 (Tailwind Blue-500)
HSL: hsl(217, 91%, 60%) | RGB: rgb(59, 130, 246) | CMYK: 76%, 47%, 0%, 4%
Generated scale: 9 shades from near-black (#1E3A8A) to near-white (#EFF6FF)