What is Color Converter?#
Color Converter rewrites a single color into the color codes your project uses. Enter a color as hex, rgb(), hsl(), hwb(), oklab(), or oklch(), and the other notations fill in as you type, along with a CSS variable, a Tailwind class, and SwiftUI and Compose values. A preview block shows the color, and H, S, L, and A sliders let you adjust it without leaving the page.
Copy one line to use it in a stylesheet, or copy everything at once as JSON.
How to Use#
- Enter or paste a color code, or choose a color from the picker.
- Fine-tune the color with the H, S, L, and A sliders if needed.
- Copy the notation you need, or copy all formats at once.
Supported Formats#
Input#
- hex: six digits such as
#3b82f6, or eight for transparency. - rgb() and hsl(): values separated by spaces or commas, with an optional alpha after a slash or as a fourth comma-separated value.
rgba()andhsla()are accepted too. - hwb(): hue, whiteness, and blackness.
- oklab() and oklch(): lightness, chroma or a/b axes, and hue.
Output#
- HEX: six digits, or eight when alpha is below 1.
- RGB and HSL: follow the separator setting. Alpha goes after a slash for space separators, and in the fourth position for comma separators.
- HWB, OKLab, and OKLCH: space separated, with alpha after a slash when needed.
- CSS variable: a
--colorcustom property. - Tailwind: an arbitrary color such as
bg-[#3b82f6]. - SwiftUI: a
Color(red:green:blue:)value with 0–1 components, plusopacitywhen alpha is below 1. - Compose: a
Color(0xAARRGGBB)value; the alpha byte comes first.
The comma form with alpha, such as rgb(59, 130, 246, 0.5), is valid CSS Color 4, but older browsers and build tools may need rgba() or hsla().
Use Cases#
- Turning a color from a design file into a value you can paste into CSS or app code.
- Checking how an existing color code reads in another notation.
- Comparing the same color as hex, RGB, and OKLCH.
- Preparing a Tailwind arbitrary color, a custom property, or a SwiftUI or Compose value from a mockup.
FAQ#
No. The conversion runs in your browser, so the color you enter stays on your device.
Values based on sRGB are rounded to the closest color a browser can display. That rounded color is what the preview shows, so it may look slightly different from the original. OKLCH and OKLab keep the values you entered, so those are the better fit when the exact wide-gamut color matters.
Yes. Each line is a ready-to-use CSS color, snippet, or SwiftUI or Compose value, including the custom property and the Tailwind arbitrary color.
Space is the modern CSS Color 4 syntax and works with an alpha value after a slash. Comma is the older form that some tools still produce. Both are valid, so matching the code you are working with keeps things consistent.