🎨 Color Code Converter

🎨
Current Color:
{{ colorPreview }}
Enter a color value...
📝
🖌️
Format: {{ inputFormat.toUpperCase() }} • Valid: {{ isValidColor ?'✅' :'❌' }} {{ getFormatHint() }}
🎯
Click any color to load it as input
💡
Examples: red, blue, green, orange, purple, pink
Extended: darkslateblue, lightcoral, mediumpurple, palegreen
Usage: Enter any CSS color name in the input above
#️⃣
{{ formats.hex }}
{{ formats.hexShort }} (3-digit)
🔴
{{ formats.rgb }}
{{ formats.rgbValues }} (values only)
🌈
{{ formats.hsl }}
{{ formats.hslValues }} (values only)
☀️
{{ formats.hsv }}
{{ formats.hsvValues }} (values only)
ℹ️
RGB Values:
R: {{ colorInfo.r }}, G: {{ colorInfo.g }}, B: {{ colorInfo.b }}
HSL Values:
H: {{ colorInfo.h }}°, S: {{ colorInfo.s }}%, L: {{ colorInfo.l }}%
HSV Values:
H: {{ colorInfo.h }}°, S: {{ colorInfo.sv }}%, V: {{ colorInfo.v }}%
Brightness:
{{ colorInfo.brightness }}%
📖
HEX: #RRGGBB or #RGB (0-F hexadecimal)
RGB: rgb(red, green, blue) (0-255 each)
HSL: hsl(hue, saturation%, lightness%) (0-360°, 0-100%, 0-100%)
HSV: hsv(hue, saturation%, value%) (0-360°, 0-100%, 0-100%)
Tips: HSL is great for adjusting brightness/saturation. HSV is preferred for color pickers.
⚠️ {{ error }}

ℹ️ About Color Code Converter

Color Code Converter converts the same digital color between RGB, HEX, HSL, and HSV notation. It is useful when a color chosen in a design tool needs to become CSS, when a brand guide lists one format but a codebase expects another, or when you need to compare how a color is represented in channel-based and hue-based models.

RGB, HEX, HSL, and HSV use cases:

  • HEX: compact CSS tokens such as #22D3EE, design-system variables, SVG fills, and documentation tables.
  • RGB: exact red, green, and blue channel values for CSS rgb(), Canvas, image-processing notes, and API payloads.
  • HSL: theme work where hue, saturation, and lightness are easier to adjust than raw RGB channels.
  • HSV/HSB: color-picker and graphics-app workflows where hue, saturation, and perceived brightness/value are the primary controls.
  • CSS color names: quick lookup for named colors such as red, rebeccapurple, and darkslateblue.

Color-space technical details:

  • HEX notation stores 8-bit sRGB channels as hexadecimal pairs: #RRGGBB. The short form #RGB expands each digit, so #0AF becomes #00AAFF.
  • RGB uses integer channels from 0 to 255. rgb(255, 0, 0) and #FF0000 both describe pure red.
  • HSL uses hue degrees from 0 to 360, plus saturation and lightness percentages. It is often easier for making lighter, darker, muted, or shifted variants.
  • HSV uses the same hue circle but replaces lightness with value/brightness. It is common in color pickers, but it is not a standard CSS color function.
  • Conversions in this tool are rounded to whole-number channels and percentages, so equivalent values may differ slightly from tools that keep more decimal precision.

Examples:

  • red converts to #FF0000, rgb(255, 0, 0), hsl(0, 100%, 50%), and hsv(0, 100%, 100%).
  • #22D3EE converts to rgb(34, 211, 238), hsl(188, 86%, 53%), and hsv(188, 86%, 93%).
  • #A3E635 converts to rgb(163, 230, 53), hsl(83, 78%, 55%), and hsv(83, 77%, 90%).

Limitations and accessibility: This converter changes notation; it does not prove that a foreground/background color pair is accessible. Check text, icons, borders, and focus states against WCAG contrast requirements before shipping UI colors. The tool does not model alpha transparency, ICC profiles, Display P3, Lab, LCH, OKLCH, or perceptual color difference.

Privacy: The interactive converter runs in your browser, so color values and brand palettes are not uploaded just to preview, validate, or copy a converted format.

Sources: CSS color syntax is defined by the CSS Color Module Level 4. Browser-oriented references are available in MDN CSS colors and MDN color values. For accessibility checks, see WCAG 2.2 contrast minimum.

API Usage Example:

POST /api/tools/conversion/color-code
Content-Type: application/json

{
    "input": "#FF5722",
    "inputFormat": "hex"
}
Ready