Color & Design Tools
Convert hex color codes to and from RGB, HSL, CMYK, and design-tool formats like Tailwind, Bootstrap, SwiftUI, and Material Design.
- Hex to RGBConvert a hex color code like #2563EB into RGB values.
- RGB to HexConvert RGB values into a 6-digit hex color code.
- Hex to RGBAConvert a hex color into RGB values plus an alpha channel.
- RGBA to HexConvert RGBA values into an 8-digit hex-with-alpha code.
- Hex to HSLConvert a hex color into hue, saturation, and lightness.
- HSL to HexConvert HSL values into a 6-digit hex color code.
- Hex to HSVConvert a hex color into hue, saturation, and value.
- HSV to HexConvert HSV values into a 6-digit hex color code.
- Hex to HSBConvert a hex color into hue, saturation, and brightness.
- HSB to HexConvert HSB values into a 6-digit hex color code.
- Hex to CMYKConvert a hex color into print-ready CMYK values.
- CMYK to HexConvert CMYK values into a 6-digit hex color code.
- Hex to OKLCHConvert a hex color into the perceptually uniform OKLCH space.
- OKLCH to HexConvert OKLCH values into a 6-digit hex color code.
- Hex to OKLabConvert a hex color into the OKLab color space.
- OKLab to HexConvert OKLab values into a 6-digit hex color code.
- Hex to TailwindConvert a hex color into Tailwind's arbitrary value syntax.
- Tailwind to HexExtract a hex color from a Tailwind arbitrary value class.
- Hex to BootstrapFind the closest Bootstrap 5 theme color to a hex value.
- Bootstrap to HexConvert a Bootstrap theme color name into hex.
- Hex to Material DesignFind the closest Material Design 500-tier color to a hex value.
- Material Design to HexConvert a Material Design color name into hex.
- Hex to UIColorConvert a hex color into iOS UIKit's UIColor syntax.
- UIColor to HexConvert a UIColor call into a hex color code.
- Hex to SwiftUI ColorConvert a hex color into SwiftUI's Color syntax.
- Hex to Jetpack Compose ColorConvert a hex color into Jetpack Compose's Color syntax.
- Hex to CSS ColorFind the standard CSS named color for an exact hex match.
- CSS Color to HexConvert a CSS named color like cornflowerblue into hex.
- Hex to PantoneFind the closest approximate Pantone color to a hex value.
- Pantone to HexConvert a Pantone color name into an approximate hex value.
- Hex to RALFind the closest approximate RAL Classic color to a hex value.
- RAL to HexConvert a RAL Classic color name into an approximate hex value.
- Hex to Benjamin MooreFind the closest approximate Benjamin Moore paint color to a hex value.
- Benjamin Moore to HexConvert a Benjamin Moore paint name into an approximate hex value.
- Hex Color Tint CalculatorLighten a hex color by blending it toward white.
- Hex Color Difference CalculatorMeasure the perceptual distance between two hex colors.
- Hex Color Opacity CalculatorConvert a hex color and opacity percentage into rgba() and hex8.
About Color & Design Tools
Web color hex codes are the reason many people encounter hexadecimal at all. This category converts hex color codes to and from RGB, HSL, and CMYK — the formats used constantly in CSS, design tools, and print workflows.
Frequently Asked Questions
Why do CSS colors use hex instead of decimal?
A 6-digit hex code packs the red, green, and blue channels (0-255 each) into a compact, copy-pasteable string — #2563EB instead of rgb(37, 99, 235).
Is HSL or RGB more useful for design work?
RGB matches how screens render color channels. HSL separates hue from saturation and lightness, which makes it easier to create consistent color variations by hand.
Does this category cover platform-specific color formats too?
Yes — alongside CSS-facing formats (RGB, HSL, HSB/HSV, CMYK), this category also covers framework and platform syntax like Tailwind, Bootstrap, Material Design, SwiftUI, UIColor, and Jetpack Compose, plus paint-matching approximations for Pantone, RAL, and Benjamin Moore.
What's the difference between a color conversion and a color approximation here?
Conversions (RGB, HSL, CMYK, OKLab, OKLCH) are exact math with no ambiguity. Approximations (Pantone, RAL, Benjamin Moore) compare against a small reference list and return the closest match with a similarity percentage — always verify those against an official swatch before physical production.