RGB to HSV Converter
Convert RGB (Red, Green, Blue) to HSV (Hue, Saturation, Value) format. HSV is the color model used in most image editing software like Adobe Photoshop, making this conversion essential for designers.
Understanding HSV
HSV represents colors using:
- Hue: The color angle (0-360°)
- Saturation: Color purity (0-100%)
- Value: Brightness level (0-100%)
RGB to HSV Examples
| Color | RGB | HSV |
|---|---|---|
| Pure Red | rgb(255, 0, 0) | hsv(0°, 100%, 100%) |
| Dark Red | rgb(128, 0, 0) | hsv(0°, 100%, 50%) |
| Salmon | rgb(250, 128, 114) | hsv(6°, 54%, 98%) |
| Forest Green | rgb(34, 139, 34) | hsv(120°, 76%, 55%) |
HSV in Design Software
Most color pickers show HSV:
- Photoshop: Color picker uses HSB (same as HSV)
- GIMP: HSV available in color dialog
- Figma: HSB in color selector
Comparing HSV and HSL
| Color | HSV | HSL |
|---|---|---|
| White | hsv(0°, 0%, 100%) | hsl(0°, 0%, 100%) |
| Full Red | hsv(0°, 100%, 100%) | hsl(0°, 100%, 50%) |
| Gray | hsv(0°, 0%, 50%) | hsl(0°, 0%, 50%) |
RGB and HSB / HSV
| RGB | HSB / HSV | |
|---|---|---|
| Syntax | rgb(255 99 71) in modern CSS, rgb(255, 99, 71) in the legacy comma form | Not valid CSS — Photoshop, Figma and colour pickers use it internally |
| Channels | red, green, blue — 0–255 or 0–100% | hue 0–360°, saturation 0–100%, brightness (value) 0–100% |
| Precision | 8 bits per channel as normally written; CSS accepts fractional values | Continuous |
| Support | Universal. The space-separated form needs a 2020-or-later browser. | Design tools only. Convert to HEX or HSL before it reaches a stylesheet. |
| Best for | Programmatic colour manipulation, canvas work, image pixel data. | Picking colours by eye — the square-and-hue-strip picker is HSB. |
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
``javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%)) — derives
a lighter shade without you ever computing one.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.