Color Converter
Pick a color or paste a code and see it graphically and in Hex, RGB, RGBf, HSL, and HSV. Works offline.
Instructions
This simple tool shows a given color graphically and in different notations. You can either choose a color visually or enter a code you already have, to visualize it or convert it to another color coding standard.
Preview box — shows the current color.
Brightness bar — move left–right to set how bright or dark the color is.
Hue bar — move left–right to change the base tone (red, green, blue, etc).
Saturation/Value area (SV) — click or drag inside: left–right = more or less saturation, top–bottom = lighter or darker.
Swatches — quick examples: variations of your color, rainbow, grays, and recent picks. Click any to select.
Random Color — picks a new random color.
Values — five fields: Hex, RGB, RGBf, HSL, HSV. Enter a value in any field to update all others. Use Copy to copy the code.
Color formats mini guide
Concise but didactic
HEX
What: Base-16 triplet: #RRGGBB (or short #RGB → digits doubled).
How: Each pair encodes one channel (0–255) in hexadecimal.
Why: Compact, universal in the web platform, easy to paste in CSS.
Use: HTML/CSS colors, design handoff, style guides, quick sharing.
Tip: #FF0000 red, #00FF00 green, #0000FF blue, #00FF7F springgreen.
Mapping
#RRGGBB →
RR =
red (0–255),
GG =
green (0–255),
BB =
blue (0–255)
RGB (0–255)
What: Integer channels (R, G, B) each from 0 to 255. Example: rgb(255, 128, 0).
How: Represents per-channel light intensity (typically 8-bit per channel).
Why: Matches image files and graphics buffers.
Use: Image processing, CSS rgb(), canvas pixels.
Mental model (tiny)
origin = (0, 0, 0) black
R axis →,
G axis ↑,
B axis ⟂
bright orange ≈
(255, 165, 0)
light gray ≈
(200, 200, 200)
RGBf (0–1)
What: RGB as normalized floats: (1.0, 0.5, 0.0).
How: 255 → 1.0, 0 → 0.0.
Why: Preferred in shaders and color math.
Use: GLSL/HLSL, WebGL, GPU pipelines.
Quick conversion
0–255 → 0–1: divide by 255 (128 → 0.502)
0–1 → 0–255: round(x*255) (0.5 → 128)
HSL (Hue, Saturation, Lightness)
What: Separates hue (color type) from lightness and saturation.
How: Hue: 0–360° around the wheel; Saturation: 0% gray → 100% vivid; Lightness: 0% black → 50% mid → 100% white.
Why: Great for palette building, accessible color variants.
Use: UI theming, design software.
Hue wheel
HSV (Hue, Saturation, Value)
What: Like HSL, but Value = max channel (brightness).
How: Hue: 0–360°, S: 0–100%, V: 0–100%.
Why: Matches paint-program pickers (hue wheel + S/V control).
Use: Digital painting, photo editors, picker UIs.
When to prefer which?
- Hex: web-ready, short codes.
- RGB: screenshots, 8-bit image data.
- RGBf: programming, shaders, math.
- HSL: design palettes, controlled variants.
- HSV: painting tools, intuitive pickers.
Cross-reference examples
Same color written five ways (springgreen):
- Hex: #00FF7F
- RGB: rgb(0, 255, 127)
- RGBf: 0.000, 1.000, 0.498
- HSL: 150°, 100%, 50%
- HSV: 150°, 100%, 100%
Note: CSS and most images use sRGB (gamma-encoded); do lighting math in linear space and convert back to sRGB for display.