HEX, RGB, HSL Color Converter Online | CSS Color Tool

使用该工具

Preview

#7c3aed

Tailwind: violet-600

Formats

HEX#7c3aed

HEX8#7c3aedff

RGBrgb(124, 58, 237)

RGBArgba(124, 58, 237, 1)

HSLhsl(262, 83%, 58%)

HSLAhsla(262, 83%, 58%, 1)

HSVhsv(262, 76%, 93%)

CMYKcmyk(48%, 76%, 0%, 7%)

Contrast

Background color

5.7:1

Contrast ratio

WCAG AA

Texto de exemplo

Shade scale

Palettes

Complementary

Analogous

Triadic

Favorites

Nenhum favorito

🔒 100% local processing. No data is sent to any server.

Extract colors from image →

快速指南与实用说明

Color converter with preview and multiple formats

This tool automatically converts colors between the most common formats used in CSS, design, frontend and branding. Simply enter a color in any format and all equivalents appear instantly.

Beyond pure conversion, you can compare contrast between colors, generate Tailwind-style shade scales, find complementary, analogous and triadic colors, and copy ready-to-use CSS code.

Supported formats and when to use each

HEX is the most common format in CSS and design. RGB is native to monitors and useful for programmatic manipulation. HSL makes intuitive adjustments to hue, saturation and lightness easier. HSV is used in editing software like Photoshop. CMYK is meant for print.

The tool converts between all these formats and also shows the closest CSS color name and approximate Tailwind class when available.

HEX: #7c3aed — standard format in CSS and design tools.
RGB: rgb(124, 58, 237) — native model for digital screens.
HSL: hsl(262, 83%, 58%) — ideal for adjusting hue and saturation.
HSV: hsv(262, 75%, 93%) — used in image editing software.
CMYK: cmyk(47%, 75%, 0%, 7%) — approximation for print.

Contrast and accessibility

The contrast section lets you check if text/background color combinations meet readability criteria. The calculation follows the relative luminance formula used in WCAG guidelines.

The tool automatically suggests whether you should use light or dark text on the chosen color, making UI and accessibility decisions easier.

Privacy and local processing

All conversion happens locally in the browser. No color, data or image is sent to any server. You can use the tool offline after loading the page.

常见问题

What is a HEX color?

HEX is a hexadecimal color representation used in CSS and design. It starts with # followed by 6 characters (or 3 abbreviated). Example: #7c3aed represents a vibrant purple.

What is the difference between RGB and HSL?

RGB defines color by red, green and blue (screen model). HSL defines by hue, saturation and lightness, being more intuitive for visual adjustments.

Can I copy the color in CSS?

Yes. Each format has an individual copy button. You can also copy as a CSS variable or copy all formats at once.

Does the tool work on mobile?

Yes. The interface is fully responsive and works on any device with a modern browser.

Is color data sent to a server?

No. All processing is local in the browser. No data leaves your device.

Is the CMYK conversion exact?

No. RGB to CMYK conversion is a mathematical approximation. For exact print results, consult the equipment ICC profile.

How to choose text color with good contrast?

Use the contrast section. It calculates the contrast ratio and indicates if the combination meets WCAG criteria for readability.

相关链接,帮助你继续完成类似任务,无需重新开始。

Image Color Extractor

Extract colors from any image directly in the browser, generate palettes, copy CSS variables and create themes for your projects — all locally.

Visual CSS Generator

Create gradients, shadows, borders, border-radius, glassmorphism, filters and animations with sliders and copy the CSS code.

使用该工具的具体任务

针对常见用途的快捷入口,使用相同的完整流程。

HEX, RGB & HSL Color Converter

hex rgb hsl color converter online

隐私与本地处理

本页面的工具直接在你的浏览器中运行,不会将输入内容发送到后端服务器。这样可以提升隐私保护并降低延迟。