Color Picker
Select a color visually or type a value, then copy HEX, RGB, or HSL. Built for everyday CSS and design handoffs.
Interactive Color Picker
Select a color to see its HEX, RGB, and HSL values.
How to use the color picker
- Pick visually: drag in the square for saturation and brightness; use the hue slider for the base tone.
- Or type a value: HEX (six digits,
#optional), RGB (0–255), or HSL (hue 0–360, saturation/lightness 0–100). - Copy: use the control next to the format you need.
- Glance at contrast: the preview bar adjusts sample text for a quick readability hint—then verify properly in the contrast checker.
Understanding color models
HEX
Six hexadecimal digits for red, green, and blue. Still the most common way to paste a color into CSS or a design token file.
#RRGGBB
Example: #1E90FF is DodgerBlue.
RGB
Additive light model used by screens. Each channel runs from 0 to 255.
rgb(red, green, blue)
Example: rgb(30, 144, 255) matches #1E90FF.
HSL
Hue on the wheel (0–360), saturation and lightness as percentages. Often easier when you want “a bit lighter” without recalculating RGB by hand.
hsl(hue, saturation%, lightness%)
Example: hsl(210, 100%, 56%) is the same blue family.
Color accessibility (WCAG)
Picking a nice color is not the same as picking a readable one. WCAG 2.x sets contrast ratios between text and background:
- AA: at least 4.5:1 for normal text, 3:1 for large text
- AAA: at least 7:1 for normal text, 4.5:1 for large text
After you choose colors here, check the pairs you will actually ship—body text, links, buttons—in a dedicated contrast tool.
Frequently asked questions
What is the difference between HSL and HSB/HSV?
Both start from hue and saturation. In HSL, lightness runs black → pure color → white, with pure color near 50%. In HSB/HSV, brightness/value runs black → pure color at 100%. CSS uses HSL, so it is the better default for web work.
Can I use 3-digit HEX codes?
Yes when each channel repeats: #F0C expands to #FF00CC. Browsers accept the short form; this tool shows the full six digits so copy-paste into tokens stays unambiguous.
What are RGBA and HSLA?
They add an alpha channel for opacity (0 fully transparent, 1 fully opaque). Example: rgba(30, 144, 255, 0.5) is 50% transparent DodgerBlue—useful for overlays and frosted UI.
Why do colors look different on other screens?
Panels, calibration, brightness, and ambient light all change appearance. The digital values stay the same; the picture does not. Spot-check important brand colors on a few devices before you ship.
Which format should I put in CSS?
HEX is fine for static brand colors. HSL is often easier when you derive hover states or themes by nudging lightness. RGB/RGBA fits when you already think in channels or need opacity.
Related color and design tools
Related tools
Related tools
Related Color and Design Tools
CSS Border-Radius Previewer
Visually generate CSS for rounded corners with our interactive border-radius previewer. Control all four corners independently or together and get the code instantly. Perfect for creating modern, soft UI elements.
Free Online Color Blindness Simulator
Simulate different types of color blindness (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) with our free online tool. Upload an image and ensure your designs are accessible to everyone.
Color Harmony Visualizer
Explore and understand color harmonies with our interactive color wheel. Create beautiful color combinations using proven color theory principles.
Color Naming Tool - Give Names to Hex Codes
Find meaningful names for hex color codes using our comprehensive database of web colors, creative names, and descriptive color terminology for designers and developers.
Color Palette Generator
Generate harmonious color palettes from a base color. Create analogous, complementary, triadic, tetradic, shade, and tint schemes for your design projects. Instantly copy HEX codes.
Color Temperature Calculator
Calculate and convert color temperature (Kelvin) to RGB and HEX values. Perfect for photographers, designers, and lighting professionals working with white balance and color grading.
Contrast Checker - Test Color Accessibility
Check color contrast ratios for WCAG compliance and accessibility standards
CSS Border Style Previewer
Create and preview CSS border styles with our interactive tool. Customize border width, style, color, and radius. Perfect for web designers and developers looking to craft perfect borders.
CSS Box Shadow Generator - Create Beautiful Shadows
Create and customize CSS box shadows with our interactive generator. Preview and copy the code instantly.
CSS Clip Path Generator - Create Custom Shapes & Clipping Paths
Generate CSS clip-path properties for custom shapes. Create circles, polygons, and complex paths with visual editing tools for modern web design.