Convert colors between HEX, RGB, HSL, and CMYK formats. Includes a color picker and palette generator.
Configure your settings
Set your preferences and input parameters. Adjust options like style, length, format, or theme to match your requirements.
Generate the output
Click the generate button to create your content. The tool processes your inputs and produces the result instantly.
Copy or download the result
Review the generated output, then copy it to your clipboard or download it as a file for use in your project.
Go deeper with workflow guides, side-by-side comparisons, and reusable embeds connected to this tool.
Add this calculator to your website with a simple iframe.
This tool is part of larger workflows. Open a hub to continue with the next relevant tools.
Continue your workflow with these tools from the same playbook.
PDF Merger
Merge multiple PDFs into a single document.. Free online, browser-based tool with instant results and no signup.
PDF to Word Converter
Convert PDF documents to editable Word format.. Free online, browser-based tool with instant results and no signup.
JSON to CSV / CSV to JSON Converter
Convert between JSON and CSV formats instantly. Supports custom delimiters, nested objects, and file upload.
ZIP Compressor
Compress files into ZIP archives.. Free online, browser-based tool with instant results and no signup.
Image Color Picker
Click any pixel in an uploaded image to inspect and copy exact HEX color values for design and frontend work.
CSS Flexbox Generator
Build flexbox layouts visually with a live preview. Adjust direction, wrapping, alignment, and gap, then copy the CSS.
CSS Gradient Generator
Generate linear gradient CSS with angle and multi-color stops, including live preview and copy-ready code output.
Image Palette Extractor
Extract dominant color swatches from uploaded images for branding systems, UI kits, and social creative workflows.
Mermaid Diagram Editor
Create flowcharts, sequence diagrams, ER diagrams, Gantt charts, mind maps, class diagrams, and pie charts with a visual editor or raw Mermaid code. Export as SVG or PNG.
SVG Optimizer
Minify SVG markup by stripping comments and extra whitespace to reduce payload size for web delivery.
WCAG Contrast Checker
Calculate contrast ratio between foreground and background colors with AA/AAA pass-fail checks for accessible UI text.
Color IQ Test
Test your color perception with 3 challenges: spot the odd color, sort gradients, and recall colors from memory. Score out of 100.
Next Step
Continue with PDF Merger
Change any field and the others update live.
Complementary
#33DBFF
CSS Strings
color: #FF5733;color: rgb(255, 87, 51);color: hsl(10.6, 100%, 60%);#FF7355
#FF8F77
#FFAB99
#FFC7BB
#FFE3DD
#FF2D00
#CC2400
#991B00
#661200
#330900
Colors on the web are represented using several different models. Each model describes the same color space but uses a different notation, making certain models better suited for specific tasks.
HEX (hexadecimal) is the most widely used color notation in web development. A HEX color starts with a # followed by six characters (or three as shorthand) representing the red, green, and blue channels in base-16. For example, #FF5733 means full red (FF = 255), some green (57 = 87), and a little blue (33 = 51). HEX is compact and universally supported in CSS, HTML, and design tools.
RGB stands for Red, Green, Blue. Each channel ranges from 0 to 255. The CSS syntax is rgb(255, 87, 51). RGB is intuitive when you need to programmatically adjust individual channels, and it maps directly to how screens physically display color using red, green, and blue sub-pixels.
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360), saturation is a percentage representing color intensity, and lightness is a percentage from black (0%) to white (100%). HSL is the most human-friendly model: want a darker version of a color? Just decrease lightness. Need a muted tone? Reduce saturation. This makes HSL ideal for building color palettes and themes.
rgba()) or are manipulating colors programmatically channel by channel.A complementary color sits opposite on the color wheel (180 degrees away in HSL). Complementary pairs create strong visual contrast and are widely used in design for call-to-action elements, highlights, and accessible color schemes.