Guides JP

Color Converter

Convert between HEX, RGB, HSL, HSV, and CMYK. Alpha (RGBA) support with WCAG contrast ratio checker.

Last updated: 2026/10/16 Developer Feedback & bug reports
Color Picker
Click to pick a color
Indigo #6366F1
#
Color Codes
HEX #6366F1
RGB rgb(99, 102, 241)
RGBA rgba(99, 102, 241, 1)
HSL hsl(239, 84%, 67%)
HSV hsv(239, 59%, 95%)
CMYK cmyk(59%, 58%, 0%, 5%)
NAME indigo
RGB
HSL
Contrast Ratio
Aa
On White 4.5:1
Aa
On Black 4.5:1
Shades
Lighter
Darker
Related Colors
Complementary
Analogous
Triadic

How to Use

1

Select a color

Use the color picker, HEX input, or sliders to select a color.

2

View conversions

All formats (HEX, RGB, HSL, HSV, CMYK) are converted automatically.

3

Copy and use

Click the copy button next to the format you need.

About This Tool

An essential color code converter for web development and design. Convert between HEX, RGB, HSL, HSV, and CMYK formats with alpha channel support. Check contrast ratios for accessibility compliance.

Features

  • Real-time conversionAll formats update instantly as you adjust.
  • Alpha supportSet transparency with RGBA and HSLA formats.
  • Contrast ratioCheck accessibility against WCAG standards.
  • Related colorsAuto-display complementary, analogous, and shades.

Use Cases

  • Website color design
  • CSS color specification
  • Design tool integration
  • Accessibility checking
  • Color scheme planning

Related Tools & Guides

Once you are comfortable converting color codes, try designing full color schemes. To balance several colors, use the Color Palette Generator; to blend two colors into a midpoint, use the Color Mixer; to build light and dark tones from one color, use the Color Shades Generator. Check text and background readability with the Color Contrast Checker. If you want to learn color notation from the ground up, the guides Basics of HEX and RGB and Understanding HSL color codes are great starting points.

FAQ

What's the difference between HEX, RGB, HSL, and HSV?
HEX uses hexadecimal, RGB uses red/green/blue values, HSL uses hue/saturation/lightness, and HSV uses hue/saturation/value. HSV is commonly used in design software.
What is contrast ratio?
The ratio of luminance between text and background colors. WCAG recommends AA (4.5:1+) and AAA (7:1+) for readable designs.
Where is alpha (transparency) used?
For overlays, hover effects, shadows, and semi-transparent elements. Use RGBA or HSLA format in CSS.
How is the "closest color name" determined?
The current color is compared by RGB distance against the ~140 named CSS colors (such as red, indigo, and tomato), and the nearest match is shown automatically. Because it is an approximation, the named color and your exact HEX may not be identical. Use it as a guide when you want to use a CSS color keyword directly.
Can I do more advanced color schemes and adjustments?
This tool focuses on converting and inspecting a single color. For multi-color scheme design, mixing two colors, or generating tonal shades in bulk, use the related Color Palette Generator, Color Mixer, and Color Shades Generator.

Related Tools

JSON Formatter Format and validate JSON with syntax highlighting Password Generator Generate secure random passwords with one click UUID Generator Generate UUID v4 in bulk with format options ASCII Converter Convert between text and ASCII/Unicode codes Base64 Encoder Encode and decode text or files to Base64

Popular Tools

Character Counter Count characters, words, and lines in real-time QR Code Generator Create custom QR codes with logo, colors & styles IP Address Checker Check your global IP address Percent Calculator Calculate percentages easily Image Converter Convert between PNG, JPG, and WebP formats Image Compressor Compress PNG, JPEG, WebP images to reduce file size

Related Guides

Web Color Basics: HEX, RGB, HSL Conversion, Palettes, and Contrast A beginner-friendly guide to web color: what HEX, RGB, and HSL mean and how they convert, opacity (alpha), WCAG contrast ratios for accessible color, and how to build a color palette. Color Theory Basics and How to Build a Palette: Wheel, Complements, 70:25:5 A friendly guide to color basics: reading the color wheel, schemes such as analogous, complementary, and triadic, the 70:25:5 ratio of base, main, and accent, how to align tone (lightness and saturation), and the difference between HEX, RGB, and HSL for practical web palettes. What Is HSL? Hue, Saturation, Lightness vs RGB/HEX and Color Tips Learn what HSL is from the ground up: the meaning of hue (H), saturation (S), and lightness (L), how it differs from RGB and HEX, why it is convenient for adjusting color schemes, how to build tones by changing lightness and saturation, and the hsl() notation in CSS.