Color Converter: HEX, RGB, HSL, CMYK, OKLCH & LAB, Free

Any color: HEX, RGB, HSL, CMYK or a CSS name

Examples: #6366F1, 6366f1, rgb(99, 102, 241), hsl(239 84% 67%), cmyk(59, 58, 0, 5), rebeccapurple

#6366F1

#6366F1 is a light, vivid blue. In RGB it is 38.8% red, 40% green and 94.5% blue.

Closest CSS color name: mediumslateblue (#7B68EE, Delta E 3.9).

Relative luminance 0.185. Contrast with white 4.47:1 (AA large), with black 4.70:1 (AA).

Every format

HEX#6366F1

RGBrgb(99, 102, 241)

RGB %rgb(38.8%, 40%, 94.5%)

HSLhsl(239, 84%, 67%)

HSV / HSBhsv(239, 59%, 95%)

HWBhwb(239 38.8% 5.5%)

CMYKcmyk(59%, 58%, 0%, 5%)

OKLCHoklch(58.54% 0.2041 277.12)

OKLaboklab(58.54% 0.0253 -0.2025)

CIE LABlab(50.1% 38.69 -70.49)

CIE LCHlch(50.1% 80.4 298.76)

CIE LUV50.1, -8.88, -111.2

CIE XYZ25.769, 18.504, 85.416

CIE xyY0.1987, 0.1427, 18.504

Decimal6514417

Binary01100011 01100110 11110001

Nearest web safe#6666FF

Color schemes

Complementary

Analogous

Triadic

Split complementary

Tetradic (rectangle)

Square

Monochromatic

Shades

Shades, tints and tones

Shades (toward black)

Tints (toward white)

Tones (toward gray)

Color blindness simulation

How #6366F1 may look with each type of color vision deficiency, at full strength and at a milder 60%.

Protanopia

#007DF6

Protanopia (60%)

#3675F4

Deuteranopia

#0071EE

Deuteranopia (60%)

#2C6DEF

Tritanopia

#0087A2

Tritanopia (60%)

#3B7BC6

Achromatopsia

#777777

Achromatopsia (60%)

#7071B5

Preview and CSS

Text on white

4.47:1

Text on black

4.70:1

Background

with black text, 4.70:1

Border

4px solid

CSS textcolor: #6366F1;

CSS backgroundbackground-color: #6366F1;

CSS borderborder: 4px solid #6366F1;

CSS shadowbox-shadow: 0 4px 12px rgb(99 102 241 / 0.35);

SCSS$brand: #6366F1;

Swift (UIKit)UIColor(red: 0.388, green: 0.4, blue: 0.945, alpha: 1)

SwiftUIColor(red: 0.388, green: 0.4, blue: 0.945, opacity: 1)

Android XML<color name="brand">#6366F1</color>

Kotlin / Jetpack ComposeColor(0xFF6366F1)

Java (Android)Color.argb(255, 99, 102, 241)

FlutterColor(0xFF6366F1)

Unity C#new Color32(99, 102, 241, 255)

.NET C#Color.FromArgb(255, 99, 102, 241)

Python tuple(99, 102, 241)

Export this color with its tints and shades

Format

:root {
  --mediumslateblue-scale-tint-10: #F1F1FE;
  --mediumslateblue-scale-tint-9: #E3E3FC;
  --mediumslateblue-scale-tint-8: #D4D5FB;
  --mediumslateblue-scale-tint-7: #C6C7FA;
  --mediumslateblue-scale-tint-6: #B8B9F9;
  --mediumslateblue-scale-tint-5: #AAACF7;
  --mediumslateblue-scale-tint-4: #9C9EF6;
  --mediumslateblue-scale-tint-3: #8E90F5;
  --mediumslateblue-scale-tint-2: #7F82F4;
  --mediumslateblue-scale-tint-1: #7174F2;
  --mediumslateblue-scale-base: #6366F1;
  --mediumslateblue-scale-shade-1: #5A5DDB;
  --mediumslateblue-scale-shade-2: #5153C5;
  --mediumslateblue-scale-shade-3: #484AAF;
  --mediumslateblue-scale-shade-4: #3F4199;
  --mediumslateblue-scale-shade-5: #363883;
  --mediumslateblue-scale-shade-6: #2D2E6E;
  --mediumslateblue-scale-shade-7: #242558;
  --mediumslateblue-scale-shade-8: #1B1C42;
  --mediumslateblue-scale-shade-9: #12132C;
  --mediumslateblue-scale-shade-10: #090916;
}

Follow @mytoolstudio

How to use

Enter a color

Type or paste a value into the box, such as #6366F1, rgb(99, 102, 241), hsl(239 84% 67%), cmyk(59, 58, 0, 5) or a CSS name. You can also use the picker, Pick from screen or Random color.

Copy any format

Every format card has its own Copy button, and Copy all copies the whole list as text. An 8 digit hex adds HEX with alpha and RGBA rows.

Explore related colors

Click any scheme, tint, shade or tone to convert that color next. Check the color blindness preview and contrast figures, then copy code or export the color with its tints and shades.

Why Color Converter

Seventeen formats from one input, including OKLCH and CIE LAB.
Plain language description and nearest CSS color name.
Schemes, tints, shades, tones and color blindness preview.
Share link, export and code for CSS, Swift, Android and Flutter.

Color formats compared

Every format describes the same color in a different way. Screens work in RGB, which HEX writes in base 16. HSL, HSV and HWB rearrange RGB into hue plus two sliders that are easier to adjust by hand. CMYK is a formula conversion toward print inks, and the LAB family measures how people perceive color.

Format	Example for #6366F1	Typical use
HEX	#6366F1	CSS, design tools, brand guides
RGB	rgb(99, 102, 241)	CSS, canvas, image editing
HSL	hsl(239, 84%, 67%)	CSS themes and hover states
HSV / HSB	hsv(239, 59%, 95%)	Color pickers in design apps
HWB	hwb(239 38.8% 5.5%)	CSS, mixing white and black into a hue
CMYK	cmyk(59%, 58%, 0%, 5%)	Starting values for print
OKLCH	oklch(58.54% 0.2041 277.12)	Modern CSS, Tailwind v4
CIE LAB	lab(50.1% 38.69 -70.49)	Measuring color difference

Schemes, tints, shades and tones

Schemes rotate the hue around the color wheel: complementary uses the opposite hue, triadic uses three hues 120 degrees apart, and so on. Tints mix the color with white, shades mix it with black, and tones mix it with a gray of the same lightness, which lowers saturation without making the color lighter or darker.

Use tints for backgrounds and hover fills, shades for pressed states and text on light surfaces, and tones when a color feels too loud for a large area. Click any swatch on the page to convert it and see its own values.

Common questions

Which formats can the color converter read?

HEX with 3, 4, 6 or 8 digits and with or without the #, rgb() and rgba(), hsl() and hsla() in comma or space syntax, cmyk() values, bare number lists read as RGB, and all 148 CSS color names. A red message explains what is wrong if a value cannot be read.

What is the difference between HSL, HSV and HWB?

All three start from the same hue angle. HSL describes lightness from black through the pure color to white. HSV, also called HSB, describes brightness from black up to the pure color. HWB describes how much white and black are mixed into the pure hue, which many people find the easiest to reason about.

What are CIE LAB and LCH values used for?

LAB and LCH are designed so that equal number changes look like equal visual changes. Print and quality control software use them to measure color differences, and CSS now accepts lab() and lch() directly. The converter uses the D65 white point, the one used for sRGB screens.

What is OKLCH and why does the converter show it?

OKLCH is a newer perceptual color space that fixes some hue shifts in LAB, especially in blues. CSS supports oklch(), and Tailwind v4 defines its default palette in it, so it is useful when you move a design system to modern CSS.

What is a web safe color?

In the 1990s many screens showed only 256 colors, so designers used 216 colors built from the channel values 0, 51, 102, 153, 204 and 255. The converter shows the nearest one for reference. Modern screens do not need web safe colors.

What does the decimal value of a color mean?

It is the 24 bit number behind the hex code: red times 65,536 plus green times 256 plus blue. Some APIs, databases and game engines store colors this way. #6366F1 is 6,514,417 in decimal.

How is the plain language description worked out?

The converter looks at the hue angle to pick a color family, such as blue or orange, and at lightness and saturation to add words like light, dark, vivid or muted. Grays are described by lightness alone. It is a quick guide, not a standard name.

Can I share a color with someone using a link?

Yes. Press Copy link to this color. The link opens the converter with the same color loaded, which is handy in tickets, chat and design reviews.

More Color tools

View all

Color Converter