Loading…
palette Design Tool
Color Picker
Pick any color and instantly get its HEX, RGB, and HSL values. Copy any format with one click.
What Is a Color Picker?
A color picker is a tool that lets you select a color visually and convert it between different code formats used in design and development. Modern web design requires colors in three common formats: HEX (used in HTML/CSS and design software), RGB (used in CSS and image editing), and HSL (used in CSS and color theory work). GlintKit's color picker shows all three simultaneously and lets you copy any format in one click.
How to Use This Tool
- Click the color swatch — your browser's native color picker opens. Choose any color from the spectrum, enter precise values, or use the eyedropper (if your browser supports it) to sample a color from anywhere on your screen.
- Or type a HEX code directly — if you already know the HEX value, type it into the HEX input field without the # symbol. The swatch and all format displays update immediately.
- Copy the format you need — click Copy HEX, Copy RGB, or Copy HSL to send that value to your clipboard. Each button confirms the copy with a brief checkmark.
- Explore tints and shades — the palette row below the format cards shows lighter (tint) and darker (shade) variations of your chosen color. Click any swatch to select it as the new base color.
Understanding Color Formats
| Format | Example | Range | Best for |
|---|---|---|---|
| HEX | #3b82f6 |
#000000 – #ffffff | HTML, CSS, design tokens, Figma |
| RGB | rgb(59, 130, 246) |
0–255 per channel | CSS, RGBA transparency, image editing |
| HSL | hsl(217, 91%, 60%) |
H: 0–360°, S/L: 0–100% | CSS, color system design, theming |
When to use HEX: When copying from design files (Figma, Sketch, XD all export HEX by default) or pasting directly into HTML attributes. HEX is the most compact format at 7 characters.
When to use RGB: When you need transparency — CSS supports rgba(59, 130, 246, 0.5) for 50% opacity. Also useful when working with canvas APIs or image manipulation in JavaScript.
When to use HSL: When building a design system. HSL makes it trivial to create color scales — keep the hue and saturation constant, vary the lightness. hsl(217, 91%, 90%) is a light tint; hsl(217, 91%, 20%) is a dark shade. No math required.
Color Theory Basics for Designers and Developers
Understanding the three color models helps you make better design decisions without guessing. In HSL terms:
- Hue (H) — the pure color, expressed as a degree on the color wheel. 0° is red, 120° is green, 240° is blue. Complementary colors are 180° apart.
- Saturation (S) — the intensity of the color, from 0% (gray) to 100% (fully vivid). Muted palettes use lower saturation; vibrant UI uses higher.
- Lightness (L) — from 0% (black) to 100% (white), with 50% being the "pure" color. Adjusting lightness while keeping H and S constant creates tints (L > 50%) and shades (L < 50%) that feel harmonious.
When designing a dark theme, a common approach is to pick your brand hue, set saturation to 60–80%, and create a scale by varying lightness from 10% to 95%. This gives you a full range of text, surface, border, and accent colors that all feel related.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL? expand_more
HEX is a six-digit hexadecimal code (e.g., #3b82f6) commonly used in web development and design software. RGB describes a color as three values from 0–255 and is widely used in CSS and image editing. HSL expresses color as a hue angle (0–360°) plus saturation and lightness percentages — it's the most intuitive format for humans because adjusting hue, saturation, and brightness feels natural. All three formats describe the same colors and are interchangeable; they're just different representations of the same underlying data.
How do I convert a HEX color to RGB? expand_more
To convert a HEX color to RGB, split the six-digit hex code into three pairs and convert each from hexadecimal to decimal. For example, #3b82f6: 3b = 59, 82 = 130, f6 = 246, so the RGB value is rgb(59, 130, 246). GlintKit's color picker does this conversion automatically — just enter or select any color and all three formats update instantly without any manual calculation.
What color format should I use in CSS? expand_more
All three formats are valid in modern CSS. HEX is the most compact and is favored for color constants and design tokens. RGB is useful when you need to add transparency (rgba). HSL is the easiest to reason about when you want to adjust a color programmatically — for example, changing only the lightness value to create hover or disabled states. In modern CSS (2023+), you can also use
hsl() with transparency directly: hsl(217 91% 60% / 50%).How do I find the HEX code of a color on my screen? expand_more
Use a browser's built-in color picker: in Chrome or Firefox DevTools, click any color swatch in the CSS panel to open a picker with an eyedropper. On macOS, use the Digital Color Meter app (built-in under Applications > Utilities). On Windows, use PowerToys' Color Picker (free from Microsoft). Design tools like Figma and Adobe XD also have eyedroppers. Once you have the HEX code, paste it into GlintKit's color picker to convert it to RGB or HSL.