Color Format Converter
Convert CSS colors, preserve transparency, compare text contrast on your chosen background and explore gradients.
Enter a CSS color.
Enter a Color
Converted Formats
Mini Preview Strip
Text contrast checker
Example text on your chosen background
WCAG text contrast thresholds: 4.5:1 for AA normal text, 3:1 for AA large text, and 7:1 for AAA normal text. Transparent foregrounds are composited onto this opaque background.
Contrast Ratio: -
WCAG Rating: -
Similar Colors
Gradient Generator
Blend Two Colors
How to Use
- Enter any color code (HEX, RGB, HSL, HSV, or CMYK) into the input field.
- Use the eyedropper to pick a color from your screen, or open the color picker if unsupported.
- All formats update instantly. Click “Copy” next to any value to copy it.
- Preview your color and see a mini strip of its related tones.
- Explore similar colors with mixes, tints, harmonies, and saturation tweaks.
- Check contrast ratio and WCAG accessibility rating for design safety.
- Create gradients and color blends with full step control.
- Export gradients as CSS, PNG, JSON, SCSS, or JS formats.
- Use URL queries like
?color=%23ff0000to share or bookmark specific colors.
Discover the story behind your colors
Explore real-world references, matching palettes and readable text pairs in our Color Encyclopedia. Start with teal, coral or lavender.
Using Color Format Converter
Convert CSS colors, build palettes and compare text contrast on a selected background.
- Enter HEX, RGB, HSL or a CSS named color, or use the picker.
- Read the converted formats. Pick an opaque background for text contrast and review the sample.
- Explore swatches, gradients and blends. Copy the values or download gradient assets.
Example
Input: rgba(255, 0, 0, 0.5) HEX includes an alpha channel; contrast blends the foreground onto the chosen background.
Questions & answers
Is transparency preserved?
Yes, in HEX, RGB and HSL output. HSV, approximate CMYK and derived palettes describe the underlying RGB color without alpha.
What does the contrast rating mean?
It evaluates WCAG text contrast for the chosen foreground/background pair, using the unrounded ratio. It is not a full accessibility audit. Transparent foregrounds are composited onto the opaque chosen background.
Is CMYK suitable for professional printing?
It is a mathematical RGB-to-CMYK approximation without an ICC print profile. A printer-specific color-managed conversion can differ.
How many gradient steps are allowed?
Use a whole number from 2 to 50. Invalid values disable gradient exports until corrected.
Related tools
A useful next step for your task.
Images & DesignImage Color PickerRead original decoded pixels and create reusable color palettes without uploading images. Includes clear instructions, examples and validated…
Developer & DataCSS Minifier & BeautifierMinify, beautify and check CSS syntax locally with parser-based processing, license comment controls, accurate rule statistics and CSS exports.
Images & DesignImage Effects ToolEdit still images locally with presets, filters and keyboard or touch before-and-after comparison. Preserve dimensions and download PNG, JPG or…
Images & DesignImage Resizer & ConverterHighly recommendedResize and convert HEIC, JPG, PNG and WebP locally. Set upload size targets, compare previews, and download images or a ZIP. Includes iPhone HEIC…
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.