Color Picker
Pick a color and instantly convert between HEX, RGB, and HSL formats. Generate color harmonies, shades, and tints.
Color Harmonies
Shades & Tints
How to Use the Color Picker
- Pick a color using the native color picker or click the large swatch.
- Enter values in HEX, RGB, or HSL fields. All formats sync automatically when you change any input.
- Click Copy next to any format to copy the color value to your clipboard.
- View complementary, analogous, and triadic color harmonies below the picker.
- Browse the shades and tints strip to find lighter or darker variations of your chosen color.
About Color Formats
Colors on the web are represented in several formats. HEX is the most common, using a # followed by six hexadecimal digits (e.g., #3498DB). RGB specifies Red, Green, and Blue channel values from 0 to 255. HSL uses Hue (0-360 degrees on the color wheel), Saturation (0-100%), and Lightness (0-100%), which many designers find more intuitive because it separates color from brightness.
Color harmonies are combinations of colors that work well together based on their positions on the color wheel. Complementary colors sit opposite each other and create high contrast. Analogous colors are adjacent and create smooth, cohesive palettes. Triadic colors are evenly spaced 120 degrees apart and provide vibrant, balanced combinations. Understanding these relationships is essential for effective web design and visual communication.
Common Color Code Examples
Here are frequently used colors in web development with their values in all three formats. Click any HEX value to copy it, or use the picker above to explore variations.
Primary Web Colors
Red: #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) Green: #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) Blue: #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) White: #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) Black: #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%)
Popular Brand Colors
Facebook: #1877F2 | rgb(24, 119, 242) Twitter X: #000000 | rgb(0, 0, 0) YouTube: #FF0000 | rgb(255, 0, 0) LinkedIn: #0A66C2 | rgb(10, 102, 194) Spotify: #1DB954 | rgb(29, 185, 84)
CSS Color Values with Opacity
rgba(52, 152, 219, 0.5) /* 50% transparent blue */ hsla(204, 70%, 53%, 0.75) /* 75% opaque blue */ #3498DB80 /* HEX with 50% alpha */
CSS Custom Properties for a Theme
:root {
--primary: #3498db;
--primary-dark: #2980b9;
--primary-light: #5dade2;
--accent: #e74c3c;
--text: #2c3e50;
--bg: #ecf0f1;
}
Color Format Comparison
Each color format has its strengths. This table helps you choose the right format for your use case.
| Feature | HEX | RGB | HSL |
|---|---|---|---|
| Syntax | #RRGGBB | rgb(R, G, B) | hsl(H, S%, L%) |
| Value Range | 00-FF per channel | 0-255 per channel | H: 0-360, S/L: 0-100% |
| Opacity Support | #RRGGBBAA (8-digit) | rgba(R, G, B, A) | hsla(H, S%, L%, A) |
| Human Intuitive | Low | Medium | High |
| Easy to Adjust | Hard | Medium | Easy (change L for brightness) |
| Best For | CSS, design specs | Programmatic color math | Creating color palettes |
| Shorthand | #RGB (3-digit) | None | None |
Color Theory for Web Developers
Understanding color theory is fundamental to creating effective web designs. The color wheel, originally developed by Isaac Newton, arranges colors by their chromatic relationship. In the HSL model, the hue value (0-360) directly maps to a position on this wheel: 0 degrees is red, 120 degrees is green, and 240 degrees is blue. This circular arrangement makes HSL the most natural format for generating color harmonies, because complementary colors are always 180 degrees apart, and analogous colors are within 30 degrees of each other.
For web developers, the most practical takeaway from color theory is that well-chosen color combinations improve usability and aesthetics simultaneously. A limited palette of 2-3 colors plus their shades and tints creates visual consistency. The primary color establishes brand identity, a secondary or accent color draws attention to calls to action, and neutral colors (grays, whites, blacks) handle text and backgrounds. The Toolsium color picker generates all these relationships automatically from any starting color.
Accessibility is an equally important consideration. The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 between text and its background for normal-size text. This means a light blue text on a white background will likely fail accessibility requirements, even though it may look appealing. When selecting colors, always verify that your foreground-background combinations meet contrast requirements to ensure your content is readable by users with visual impairments.
Frequently Asked Questions
A HEX color like #FF5733 is split into three pairs: FF (red), 57 (green), 33 (blue). Convert each pair from hexadecimal to decimal: FF=255, 57=87, 33=51. So #FF5733 = RGB(255, 87, 51). This tool does the conversion automatically.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360), Saturation is a percentage (0% gray, 100% full color), and Lightness is a percentage (0% black, 50% normal, 100% white). It is often more intuitive for designers than RGB.
Complementary colors are pairs that sit opposite each other on the color wheel (180 degrees apart). They create strong visual contrast when placed together. For example, red and cyan, or blue and orange are complementary pairs.
A shade is created by adding black to a color (decreasing lightness), making it darker. A tint is created by adding white (increasing lightness), making it lighter. Together they create a monochromatic palette from a single base color.
HEX uses hexadecimal notation (#RRGGBB) and is the most common format in CSS. RGB specifies red, green, and blue channels from 0-255. HSL uses hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). All three represent the same colors using different notation systems.
For WCAG 2.1 accessibility, text must have a contrast ratio of at least 4.5:1 against its background for normal text and 3:1 for large text. Use high contrast between text and background. Dark text on light backgrounds or white text on dark backgrounds generally provides sufficient contrast.
Opacity controls how transparent a color is. In CSS, add opacity using rgba(R, G, B, alpha) or hsla(H, S%, L%, alpha) where alpha ranges from 0 (fully transparent) to 1 (fully opaque). HEX also supports alpha with 8-digit notation: #RRGGBBAA.
CSS custom properties (variables) let you define reusable color values. Define them with --color-name: #value in :root and use them with var(--color-name). This makes it easy to create consistent color themes and switch between light and dark modes across your entire site.