--- title: "Color Code Converter - Convert HEX, RGB, HSL, and OKLCH at once" description: "View one color code as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a code or pick a color, including colors with transparency. Useful for aligning CSS color values, moving colors from design tools into web or app code, and checking CMYK references for print." canonical_url: "https://web-toolbox.dev/en/tools/color-converter" meta: author: K "og:description": "View one color code as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a code or pick a color, including colors with transparency. Useful for aligning CSS color values, moving colors from design tools into web or app code, and checking CMYK references for print." "og:image": "https://web-toolbox.dev/og/en/tools/color-converter-e9632402.png" "og:image:alt": "Color Code Converter" "og:image:height": "630" "og:image:width": "1200" "og:title": "Color Code Converter - Convert HEX, RGB, HSL, and OKLCH at once" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Color Code Converter** Convert a color code into multiple notations ## **Color to convert** **Color code** Accepts #RGB, #RRGGBB, rgb(), hsl(), oklch(), and more **Aa**#2563eb ## **Result** - - - - - - - ### **App code** - - ## What is Color Code Converter? Color Code Converter shows one color as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a color code or pick a color, and the result updates right away. Use it to align CSS color values, move a color from a design tool into code, or check a CMYK reference for print. ## How to Use 1. Enter a color code or pick a color. 2. The result list shows each notation and the SwiftUI and Compose code. 3. Copy the value you need, or copy all values at once. The input accepts HEX (`**#RGB**`, `**#RGBA**`, `**#RRGGBB**`, `**#RRGGBBAA**`), `**rgb()**`, `**rgba()**`, `**hsl()**`, `**hsla()**`, `**oklch()**`, and `**oklab()**`. You can omit the leading `**#**`; leading and trailing whitespace and a trailing semicolon are ignored. Three- and four-digit HEX values are expanded to six and eight digits in the results. When a color includes transparency, HEX uses eight digits and the other notations include alpha. ## When to Use Each Format ### HEX Opaque colors use six digits, and colors with transparency use eight. HEX is the most widely used notation in CSS and front-end work, and it also fits style guides and component tokens. ### RGB Use `**rgb(R G B)**` when you want to work with the three color channels directly. It fits assembling values in JavaScript or matching the RGB values from a design tool. ### HSL / HSV HSL and HSV describe a color by hue, saturation, and lightness or value. They are convenient when you want to keep the hue and change only the lightness, or reduce saturation toward gray. HSV is not a CSS function, so use it to check the notation from design tools. When pasting into CSS, use RGB, HSL, OKLCH, or another CSS notation. ### OKLCH / OKLab OKLCH and OKLab are perceptually uniform spaces introduced in CSS Color 4. `**oklch(L C H)**` uses lightness, chroma, and hue; `**oklab(L a b)**` uses Cartesian coordinates. They are useful in design systems when you want to control lightness and chroma, or when you want to write `**oklch()**` directly in CSS. They can describe colors outside sRGB, but converting to HEX or RGB clips them to the displayable range. ### CMYK CMYK is a print-oriented reference. It shows roughly what a web color becomes on press. It is not a substitute for a color proof, because the result depends on the press and profile. ### SwiftUI / Compose These are code expressions for iOS and Android. SwiftUI uses `**Color(red:green:blue:)**` with sRGB values, and Compose uses `**Color(0xAARRGGBB)**` with ARGB values. When the color includes transparency, SwiftUI adds `**opacity**`, and Compose includes the transparency in the alpha byte. ## Use Cases - Moving a color from a design tool into CSS or a style definition - Aligning `**rgba()**` or `**hsla()**` values to HEX or eight-digit HEX for tokenization - Listing several notations of a color in a palette or style guide - Checking a CMYK reference before sending a web color to print - Getting `**oklch()**` or `**oklab()**` notation from an existing color **How was your experience?** Last updated: October 30, 2026 ### **Related Tools** - [

**Color Contrast Checker**

](https://web-toolbox.dev/en/tools/color-contrast-checker) - [

**Color Code Extractor**

](https://web-toolbox.dev/en/tools/color-extractor) - [

**Color Eyedropper**

](https://web-toolbox.dev/en/tools/color-eyedropper) - [

**Tailwind Color Palette Generator**

](https://web-toolbox.dev/en/tools/tailwind-color-palette) - [

**ASCII to HEX Converter**

](https://web-toolbox.dev/en/tools/ascii-to-hex) - [

**CSV to JSON Converter**

](https://web-toolbox.dev/en/tools/csv-to-json) - [

**Epoch Converter**

](https://web-toolbox.dev/en/tools/epoch-converter) - [

**HEX to ASCII Converter**

](https://web-toolbox.dev/en/tools/hex-to-ascii) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/color-converter#webpage","@type":"WebPage","description":"View one color code as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a code or pick a color, including colors with transparency. Useful for aligning CSS color values, moving colors from design tools into web or app code, and checking CMYK references for print.","name":"Color Code Converter - Convert HEX, RGB, HSL, and OKLCH at once","url":"https://web-toolbox.dev/en/tools/color-converter","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/color-converter"]}]},{"@id":"https://web-toolbox.dev/en/tools/color-converter#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"View one color code as HEX, RGB, HSL, OKLCH, OKLab, HSV, and CMYK, plus SwiftUI and Compose code. Type a code or pick a color, including colors with transparency. Useful for aligning CSS color values, moving colors from design tools into web or app code, and checking CMYK references for print.","name":"Color Code Converter - Convert HEX, RGB, HSL, and OKLCH at once","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.