Color Picker
Pick a color and instantly copy its HEX value for CSS, UI design, branding and frontend work.
Back to all tools on ToolForge
HEX
About Color Picker
The Color Picker tool lets you pick a color and instantly copy its HEX value for CSS, design and branding work.
HEX Color Format
HEX colors use a 6-digit hexadecimal format #RRGGBB where each pair represents red, green, and blue channels:
// HEX color breakdown #RRGGBB ||||| ||||+-- Blue (00-FF) |||+---- Green (00-FF) ||+----- Blue (00-FF) |+------ Green (00-FF) +------- Red (00-FF) // Examples: #FF0000 = Red (255, 0, 0) #00FF00 = Green (0, 255, 0) #0000FF = Blue (0, 0, 255) #FFFFFF = White (255, 255, 255) #000000 = Black (0, 0, 0)
Common Color Values
| Color | HEX | RGB |
|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) |
| Green | #00FF00 | rgb(0, 255, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
| Yellow | #FFFF00 | rgb(255, 255, 0) |
| Cyan | #00FFFF | rgb(0, 255, 255) |
| Magenta | #FF00FF | rgb(255, 0, 255) |
Color Theory Basics
- Complementary: Colors opposite on the color wheel (high contrast)
- Analogous: Colors adjacent on the wheel (harmonious)
- Triadic: Three colors equally spaced (balanced variety)
- Monochromatic: Different shades/tints of one color (unified look)
Frequently Asked Questions
- What is a HEX color code?
- A HEX color code is a 6-digit hexadecimal representation of RGB color values. Each pair of digits represents red, green, and blue channels (00-FF or 0-255). For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.
- How do I pick colors for my design?
- Start with a base color that matches your brand or mood. Use color theory: complementary colors (opposite on the wheel) for contrast, analogous colors (adjacent) for harmony. Test colors at different sizes and ensure sufficient contrast for text readability (WCAG AA requires 4.5:1 for normal text).
- What is the difference between HEX, RGB and HSL?
- HEX (#RRGGBB) is a compact hexadecimal format for web CSS. RGB (rgb(255, 128, 0)) uses decimal values 0-255 for each channel. HSL (hsl(30, 100%, 50%)) represents hue (0-360), saturation (0-100%), and lightness (0-100%). All three represent the same colors but HSL is more intuitive for adjustments.
- Can I use 3-digit HEX codes?
- Yes, 3-digit HEX codes (#RGB) are shorthand for 6-digit codes (#RRPPBB). Each digit is doubled: #F00 becomes #FF0000 (red), #0F0 becomes #00FF00 (green), #00F becomes #0000FF (blue). This shorthand only works when each pair has identical digits.