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 #7C3AED
Share URL https://comutil.com/color?preset=ui-accent
Clear
Palette Preview
Recommended text
#FFFFFF
UI accent check is normalized into copy-friendly HEX, RGB, HSL, and token snippets.
Preset ready to share #7C3AED

UI accent check is normalized into copy-friendly HEX, RGB, HSL, and token snippets.

Active input #7C3AED
Recommended text #FFFFFF
Normalized Outputs
HEX
Compact for CSS, browser tools, and design docs.
#7C3AED
RGB
Channel-accurate for design handoff, canvas work, and image tooling.
rgb(124, 58, 237)
HSL
Convenient when you need to tweak hue, saturation, or lightness separately.
hsl(262, 83%, 58%)
R, G, B channels
Plain numeric channels for tickets, specs, and tokens.
124, 58, 237
Readability Context

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

White text
#FFFFFF
5.70:1
Preview text
Aa body copy
Normal text: Pass
Large text: Pass
Dark text
#111827
3.11:1
Preview text
Aa body copy
Normal text: Needs more contrast
Large text: Pass
Handoff Snippets
CSS variable
:root {
  --brand-accent: #7C3AED;
  --brand-accent-rgb: 124 58 237;
}
Design token JSON
{
  "color": {
    "accent": {
      "value": "#7C3AED",
      "rgb": "124 58 237",
      "hsl": "hsl(262, 83%, 58%)"
    }
  }
}
Inline style
background-color: #7C3AED;
color: #FFFFFF;
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.