Color Converter

Convert between HEX, RGB, and HSL color codes, then package the result into copy-friendly snippets you can share.

Color Input
Selected color #0EA5E9
Share URL https://comutil.com/color?preset=brand-token
Clear
Palette Preview
Recommended text
#111827
Brand token handoff is normalized into copy-friendly HEX, RGB, HSL, and token snippets.
Preset ready to share #0EA5E9

Brand token handoff is normalized into copy-friendly HEX, RGB, HSL, and token snippets.

Active input #0EA5E9
Recommended text #111827
Normalized Outputs
HEX
Compact for CSS, browser tools, and design docs.
#0EA5E9
RGB
Channel-accurate for design handoff, canvas work, and image tooling.
rgb(14, 165, 233)
HSL
Convenient when you need to tweak hue, saturation, or lightness separately.
hsl(199, 89%, 48%)
R, G, B channels
Plain numeric channels for tickets, specs, and tokens.
14, 165, 233
Readability Context

Use dark text on this swatch for the strongest small-text contrast.

White text
#FFFFFF
2.77:1
Preview text
Aa body copy
Normal text: Needs more contrast
Large text: Needs more contrast
Dark text
#111827
6.40:1
Preview text
Aa body copy
Normal text: Pass
Large text: Pass
Handoff Snippets
CSS variable
:root {
  --brand-accent: #0EA5E9;
  --brand-accent-rgb: 14 165 233;
}
Design token JSON
{
  "color": {
    "accent": {
      "value": "#0EA5E9",
      "rgb": "14 165 233",
      "hsl": "hsl(199, 89%, 48%)"
    }
  }
}
Inline style
background-color: #0EA5E9;
color: #111827;
Example Presets
Brand token handoff
#0EA5E9
Start with a primary brand swatch and copy CSS or design-token values for implementation.
RGB cleanup from design
#FF5733
Normalize an RGB value pasted from design notes into HEX, HSL, and reusable snippets.
UI accent check
#7C3AED
Review an accent color with quick readability guidance before shipping it into a button or badge.
What are Color Formats?

Colors on the web can be represented in multiple formats. HEX uses hexadecimal notation (#RRGGBB), RGB specifies red, green, blue components (0-255), and HSL uses hue (0-360), saturation, and lightness (0-100%). Each format has advantages for different use cases like design work or programmatic color manipulation.

Color Format Details

HEX colors encode RGB values in hexadecimal (16-255 per channel). RGB directly specifies color intensity (0-255). HSL separates color (hue) from intensity (saturation/lightness), making it more intuitive for creating color variations. All formats can represent the same 16.7 million colors.

Common Use Cases
  • Converting design tool colors to CSS
  • Creating color themes and palettes
  • Adjusting color brightness and saturation
  • Matching brand colors across platforms
  • Accessibility testing for color contrast
Format Comparison
HEX #RRGGBB - Compact, widely supported, easy to copy/paste
RGB rgb(R, G, B) - Intuitive for programmatic manipulation
HSL hsl(H, S%, L%) - Easy to create variations by adjusting components
Frequently Asked Questions

When should I use HSL over RGB?

HSL is better when you need to create color variations (lighter, darker, more/less saturated) as you can adjust a single component. RGB is better for color mixing and when working with image processing.

What is HEX shorthand?

HEX shorthand uses 3 digits instead of 6 (#RGB instead of #RRGGBB). Each digit is doubled: #F00 becomes #FF0000 (red). Only works when each pair has identical digits.