Color Table
Drag the square for saturation and brightness, use the rainbow strip for hue, or type a HEX value. Formats below update live.
Color palette
Drag saturation and brightness on the square, pick hue on the strip, or paste a HEX color.
Formats
Click a box to copy that code to the clipboard.
About this Tool
A professional color palette utility and real-time color coordinate converter built for UI/UX designers, frontend developers, and digital illustrators. Featuring a responsive 2D saturation/value canvas and a 360-degree circular hue slider, it dynamically recalculates values across all modern formats in real time: web HEX (including 8-digit alpha channel), CSS rgb()/rgba(), hsl()/hsla(), print-standard CMYK, and digital HSV/HSB. It comes pre-loaded with essential palette references—including Web Safe Colors, Tailwind CSS color swatches, and Material Design systems—along with WCAG 2.1 contrast ratio verification and local swatch history management, completely browser-based with zero network latency.
Processed safely on your device
Everything happens in your browser on this device. Your files are never sent to our servers—so you can use it with peace of mind.
How to Use
Drag across the 2D visual canvas to adjust saturation and brightness, or drag the 360° hue spectrum slider to choose your base color tone.
Alternatively, input known coordinate values directly into the HEX, RGB, HSL, or CMYK text fields to inspect and convert specific colors.
Browse the integrated swatch collections below (Web Safe, Pastel, Neon, and Modern UI palettes) to explore curated harmonic combinations.
Click the copy button adjacent to your preferred format (HEX, RGB, HSL, CMYK) to paste clean CSS or design tokens directly into your project.
Key Scenarios & Use Cases
UI Design Systems & CSS Token Architecture
Translate brand identity colors into exact HEX and RGBA values for Tailwind CSS config, CSS Custom Properties (variables), and Figma design systems.
Display-to-Print CMYK Proofing & Calibration
Convert digital RGB screen assets into commercial print CMYK ink percentages to eliminate unexpected color shifts and muddy printing results.
WCAG 2.1 Accessibility Contrast Verification
Evaluate foreground text against background colors to ensure compliance with the 4.5:1 (AA) and 7:1 (AAA) contrast ratios required for visual accessibility.
Harmonic Palette & Gradient Generation
Calculate complementary, analogous, and triadic accent colors by systematically shifting HSL hue angles and saturation steps.
Dark Mode & Light Mode Theme Tuning
Symmetrically adjust HSL lightness parameters to create glare-free dark theme equivalents while maintaining consistent brand color recognition.
Frequently Asked Questions (FAQ)
Computer displays emit additive red, green, and blue light (RGB) with a broad color gamut. In contrast, physical print utilizes subtractive cyan, magenta, yellow, and black ink pigments (CMYK), which have a narrower physical gamut. Our tool applies standard colorimetric transformation equations to calculate the closest reproducible print-safe CMYK formulation.
RGB and HEX represent raw hardware light intensities, making it difficult to manually brighten or mute a color without recalculating all three channels. HSL separates 'Hue' (the actual color shade) from 'Saturation' and 'Lightness', allowing developers to easily generate button hover states, active presses, and disabled variations by simply adjusting the Lightness percentage.
In an 8-digit HEX code, the first six characters represent the red, green, and blue channels, while the final two characters specify alpha transparency in hexadecimal notation (00 = 0% opacity, 80 = ~50% opacity, FF = 100% opacity). Modern web browsers support 8-digit hex syntax natively in CSS.
For normal body text, WCAG 2.1 Level AA mandates a minimum luminance contrast ratio of 4.5:1 against the background. For large text (18pt/24px or larger, or 14pt bold), the minimum ratio is 3:1. The stricter Level AAA requires 7:1 for normal text and 4.5:1 for large text.
Web Safe Colors are a legacy palette of 216 colors established in the 1990s to ensure uniform display on 8-bit (256-color) monitors. While modern true-color (24-bit/32-bit) and DCI-P3 displays do not require them, they remain a popular retro aesthetic benchmark and a dependable reference for cross-platform consistency.
Yes. Your recently picked swatches and clipboard history are safely cached in your browser's local storage (LocalStorage). Your favorite colors remain accessible across sessions without requiring any account login.