Colour Converter
Convert colours between HEX, RGB, RGBA, HSL, HSLA, HSV, HWB and CMYK instantly. Preview colours, inspect CSS values and analyse contrast directly in your browser.
Convert & Inspect Colours
Convert between HEX, RGB, RGBA, HSL, HSLA, HSV, HWB and CMYK, preview the colour and inspect accessibility contrast.
Choose visually or enter an exact value below.
Current Colour
#2563EB
Examples:
#2563EB,
37, 99, 235,
221, 83, 53.
Converted Colour Values
Copy the representation you need for CSS, application code or design software.
CMYK is an RGB-derived estimate and is not a replacement for printer-specific colour profiles.
Colour Channels
Inspect the underlying RGB and HSL components of the selected colour.
Red
37
Green
99
Blue
235
Alpha
1
Hue
221°
Saturation
83%
Lightness
53%
Lighter & Darker Variations
Explore variations by changing HSL lightness while preserving the current hue and saturation. Select a swatch to make it the active colour.
Related Colours
Useful derived colours for exploration and design comparison.
Complementary
#EBAD25
Grayscale
#5F5F5F
Text Contrast
Compare the selected colour against white and black using relative luminance and WCAG contrast thresholds.
0.0000
White Text
#FFFFFF
Contrast
0:1
AA Normal
—AA Large
—AAA Normal
—AAA Large
—Black Text
#000000
Contrast
0:1
AA Normal
—AA Large
—AAA Normal
—AAA Large
—Recommended Text Colour
White
This chooses whichever of pure black or pure white provides the greater calculated contrast.
Colour Format Reference
Common ways the same colour can be represented across web development and design applications.
| Format | Components | Typical Use |
|---|---|---|
| HEX | #RRGGBB | CSS and web development |
| RGB | Red, Green, Blue | Screens and CSS |
| RGBA | RGB + Alpha | Transparent web colors |
| HSL | Hue, Saturation, Lightness | Human-friendly CSS adjustments |
| HSLA | HSL + Alpha | Transparent HSL colors |
| HSV / HSB | Hue, Saturation, Value | Design and color-picking software |
| HWB | Hue, Whiteness, Blackness | Modern CSS color representation |
| CMYK | Cyan, Magenta, Yellow, Black | Print-oriented workflows |
How HEX Colours Work
A six-digit HEX colour contains three two-digit hexadecimal channel values.
Red
25
Hexadecimal 25 = decimal 37
Green
63
Hexadecimal 63 = decimal 99
Blue
EB
Hexadecimal EB = decimal 235
RGB to CMYK Is an Approximation
RGB describes light emitted by screens, while CMYK describes inks used in many printing workflows. They do not represent identical physical colour spaces.
The CMYK result provided by this converter is a mathematical estimate from RGB. Professional printing may require ICC profiles, calibrated equipment and printer-specific colour management.
Use Contrast Checks for Accessible Interfaces
Colour can look readable to one person while still providing insufficient contrast for other users or display conditions.
Use the calculated contrast results as part of your accessibility testing, particularly for text, controls and important interface information.
Private Browser-Based Colour Conversion
Colour conversion and analysis are performed directly inside your browser.
- No file upload is required.
- Colour values do not need to be sent to SwiftVecto's server.
- Conversions update locally as you enter values or use the colour picker.
- Contrast, complementary colours, grayscale values and variations are all calculated locally.
Continue with These Tools
Finished using Colour Converter? Here are some related tools that people commonly use next to complete their workflow faster.
JSON Formatter & Validator
Format, beautify, minify and validate JSON online instantly. Detect invalid JSON, organise nested data and create clean, readable JSON directly in your browser.
Base64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to readable text instantly. Supports UTF-8 and Base64URL with private browser-based processing.
Regex Tester
Test JavaScript regular expressions online with live match highlighting, capturing groups, named groups, flags and replacement previews directly in your browser.
Password Generator
Generate strong random or memorable passwords instantly. Choose password length, character types, symbols and easy-to-remember word combinations with secure browser-based generation.
UUID Generator
Generate secure random UUID v4 identifiers instantly online. Create single or bulk UUIDs, choose uppercase or lowercase output, remove hyphens and copy or download results directly in your browser.
Hash Generator
Generate SHA-1, SHA-256, SHA-384 and SHA-512 hashes instantly from text. Create lowercase or uppercase hexadecimal hashes with private browser-based processing.
How to Convert and Inspect Colours
Use the SwiftVecto Colour Converter to convert a colour between common web and design formats including HEX, RGB, RGBA, HSL, HSLA, HSV, HWB and CMYK. Enter a colour in one supported format and instantly inspect equivalent representations, CSS-ready values and useful colour information.
Overview
Digital colours can be represented in several different formats depending on the application. Web developers commonly work with HEX, RGB, RGBA, HSL and HSLA, while design and image workflows may also use HSV, HSB, HWB and CMYK. Although these formats describe related colour information, they use different coordinate systems and value ranges. The SwiftVecto Colour Converter provides one place to translate between these representations. The browser interface can also preview the selected colour, generate CSS-ready values, show lighter and darker variations, identify a complementary colour and analyse contrast against black and white. This makes the tool useful for frontend development, UI design, branding, accessibility testing and general colour exploration.
Benefits
How It Works
Choose or enter a colour using a supported input format.
The input is converted internally into normalized RGB channel values.
Equivalent hexadecimal values are calculated from the RGB channels.
HSL is calculated from the relationship between the highest and lowest RGB channel values.
HSV uses hue together with colour saturation and the highest RGB channel value.
HWB represents hue together with whiteness and blackness components.
CMYK values are estimated from the normalized RGB values.
Alpha transparency is preserved where the input format supports it.
The colour preview updates to show the interpreted colour.
CSS-ready output values can be copied directly into stylesheets or frontend code.
Contrast analysis compares relative luminance values between colours.
Generated variations are derived from the selected base colour without uploading anything to the server.
How to Use This Tool
-
1Enter a HEX value such as #2563EB, or select another supported input format.
-
2Alternatively, use the visual colour picker to choose a colour.
-
3Review the converted HEX, RGB, HSL, HSV, HWB and CMYK values.
-
4Adjust individual channel values if you want to fine-tune the colour.
-
5Use the alpha control when working with transparent colours.
-
6Copy the representation required by your application.
-
7Review the live colour preview.
-
8Check lighter, darker and complementary variations when exploring a palette.
-
9Review contrast against white and black when selecting text or background colours.
-
10Use Clear or Reset before beginning with another colour.
Helpful Tips
- HEX and RGB are among the most common colour formats in web development.
- Use RGBA or HSLA when you need an alpha transparency value.
- HSL can be easier to adjust manually because hue, saturation and lightness are separated into intuitive controls.
- HSV and HSB describe the same general colour model using Hue, Saturation and Value or Brightness terminology.
- CMYK is primarily associated with print workflows, while RGB describes emitted-light displays.
- Conversions between RGB and CMYK are mathematical approximations and do not replace printer or ICC colour-profile management.
- A six-digit HEX value such as #2563EB contains two hexadecimal digits for each red, green and blue channel.
- Three-digit HEX values such as #fff are shorthand forms of six-digit values such as #ffffff.
- Eight-digit HEX can include an alpha component when supported by the target platform.
- RGB channel values normally range from 0 to 255.
- HSL hue values are expressed as angles around a 360-degree colour wheel.
- HSL saturation and lightness are normally represented as percentages.
- HSV value or brightness is not the same quantity as HSL lightness.
- Check contrast whenever a colour will be used for text or important interface content.
- Do not rely only on visual appearance when accessibility requirements matter.
Common Uses
Convert a brand HEX value into RGB for application code.
Convert an RGB design specification into CSS HEX.
Find the HSL representation of a Tailwind or CSS colour.
Convert HSL values into RGB while tuning a theme.
Generate CMYK estimates for a web colour before discussing print artwork.
Find the HSV representation used by another design application.
Check the contrast between a button background and white text.
Generate a complementary colour for a design concept.
Create lighter and darker variations of a brand colour.
Convert a transparent RGBA value into HSLA.
Inspect the individual RGB channels of an existing HEX code.
Copy CSS-ready colour values while developing a Laravel frontend.
Worked Examples
The following examples demonstrate how this tool can be used in realistic scenarios.
Converting HEX to RGB
Enter #2563EB. The converter interprets the hexadecimal channel pairs and converts them into decimal RGB values, producing red 37, green 99 and blue 235.
Converting RGB to HEX
Enter RGB values 37, 99 and 235. Each channel is converted into a two-digit hexadecimal value and combined into the HEX representation #2563EB.
Using HSL for Theme Adjustment
A developer converts a brand colour into HSL, then adjusts only the lightness component to create lighter and darker interface states while preserving approximately the same hue and saturation.
Checking Text Contrast
A background colour is compared with white and black. The contrast ratios help determine which text colour provides better readability and whether common WCAG contrast thresholds are satisfied.
Converting for Print Discussion
A designer converts an RGB website colour into an approximate CMYK representation before discussing printed marketing material. The result is useful as a starting point but should not replace proper colour-managed print production.
Common Mistakes
Avoid these common mistakes to achieve the most accurate results.
- Entering a HEX value with invalid characters outside 0-9 and A-F.
- Using RGB channel values below 0 or above 255.
- Confusing HSL lightness with HSV brightness or value.
- Assuming RGB and CMYK conversions are perfectly reversible in every real-world workflow.
- Treating a mathematical CMYK conversion as equivalent to professional ICC colour management.
- Forgetting that alpha controls transparency rather than colour brightness.
- Using a percentage value where an RGB channel value is expected.
- Forgetting the # prefix when copying a HEX value into CSS where it is required.
- Assuming three-digit HEX contains less colour information rather than being shorthand for duplicated digits.
- Confusing hexadecimal FF with decimal 255.
- Assuming complementary colours always produce an aesthetically pleasing palette without considering context.
- Choosing text colours based only on appearance without checking contrast.
- Assuming the same RGB values will look exactly identical on every physical display.
- Expecting web RGB values to reproduce identically in printed output.
- Copying CMYK percentages directly into CSS, which does not use ordinary CMYK values for normal web colours.
Glossary
Definitions of the most important terms used by this tool.
HEX
A hexadecimal colour representation commonly used on the web, usually written as #RRGGBB.
RGB
A colour model representing red, green and blue light channels, commonly using values from 0 to 255.
RGBA
RGB colour combined with an alpha value controlling transparency.
HSL
A colour representation using hue, saturation and lightness.
HSLA
HSL colour combined with an alpha transparency value.
HSV
A colour representation using hue, saturation and value. It is also commonly called HSB, where B means brightness.
HSB
Hue, Saturation and Brightness, commonly referring to the same model as HSV.
HWB
A colour model using hue, whiteness and blackness components.
CMYK
A subtractive colour model using cyan, magenta, yellow and black, commonly associated with printing.
Hue
The basic colour family represented as an angle around a colour wheel, commonly between 0 and 360 degrees.
Saturation
A measurement describing how intense or grey the colour appears within colour models such as HSL and HSV.
Lightness
The HSL component describing the position of a colour between black and white.
Value
The HSV component describing the brightness of the strongest RGB channel.
Alpha
A value representing opacity or transparency, where lower alpha values make a colour more transparent.
Hexadecimal
A base-16 number system using digits 0 through 9 and letters A through F.
Complementary Colour
A colour located approximately opposite another colour on a hue wheel.
Relative Luminance
A calculated measure of the relative brightness of a colour used when computing accessibility contrast ratios.
Contrast Ratio
A comparison between the relative luminance of two colours, commonly used to assess text readability and accessibility.
WCAG
Web Content Accessibility Guidelines, which include recommendations for minimum contrast between text and its background.
CSS Colour
A colour representation accepted by Cascading Style Sheets, including HEX, rgb(), rgba(), hsl() and other supported syntaxes.
Frequently Asked Questions
What is a colour converter?
A colour converter translates the same colour between different representations such as HEX, RGB, HSL, HSV, HWB and CMYK.
What colour formats does this tool support?
The SwiftVecto Colour Converter is designed to support HEX, RGB, RGBA, HSL, HSLA, HSV or HSB, HWB and CMYK representations.
How do I convert HEX to RGB?
Enter the HEX value and the converter translates each hexadecimal channel pair into its decimal red, green and blue values.
How do I convert RGB to HEX?
Each red, green and blue channel is converted from decimal into a two-digit hexadecimal value and the three values are combined into the final HEX colour.
What does #2563EB mean?
In a six-digit HEX colour, the first pair represents red, the second green and the third blue. #2563EB therefore represents RGB values 37, 99 and 235.
What is three-digit HEX?
Three-digit HEX is a shorthand format. For example, #fff expands to #ffffff and #abc expands to #aabbcc.
What is the difference between RGB and RGBA?
RGB contains red, green and blue channels. RGBA adds an alpha channel controlling transparency.
What is the difference between HSL and HSLA?
HSL contains hue, saturation and lightness. HSLA includes the same values plus alpha transparency.
What is HSL useful for?
HSL can be convenient when adjusting colours because hue, saturation and lightness can be changed independently in ways that are often intuitive for design work.
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL uses lightness while HSV uses value or brightness. Their numerical values therefore describe colours differently even when the visible colour is the same.
Are HSV and HSB the same?
In most design and software contexts, HSV and HSB refer to the same model, with Value and Brightness being alternative names for the third component.
What is HWB?
HWB describes a colour using hue plus whiteness and blackness percentages. It is also supported as a CSS colour representation in modern environments.
What is CMYK?
CMYK represents cyan, magenta, yellow and black components and is primarily associated with subtractive print-colour workflows.
Can RGB be converted to CMYK?
Yes, RGB values can be mathematically converted into estimated CMYK percentages. Professional print reproduction may still require color profiles and printer-specific management.
Why does a printed colour sometimes look different from the screen?
Displays generally produce colour with emitted RGB light while print uses inks and reflected light. Device capabilities, colour profiles, paper, ink and lighting conditions can all affect the final appearance.
What does alpha mean in a colour?
Alpha describes opacity. An alpha of 1 is fully opaque, while 0 is fully transparent, with intermediate values representing partial transparency.
Can I use these converted values directly in CSS?
HEX, RGB, RGBA, HSL, HSLA and supported HWB values can be expressed using CSS syntax. The interface can provide CSS-ready representations for convenient copying.
What is a complementary colour?
A complementary colour is located approximately opposite the original hue on a traditional hue wheel. It can provide strong visual contrast but is not automatically the best design pairing for every interface.
What is a contrast ratio?
A contrast ratio compares the relative luminance of two colours. It is commonly used when assessing whether foreground text is sufficiently distinguishable from its background.
What contrast ratio does normal text need?
WCAG guidance commonly uses a contrast ratio of at least 4.5:1 for normal text at the AA level, while larger text has a lower threshold. The interface can show the relevant pass or fail indicators.
Should I use black or white text on a coloured background?
The better option depends on the colour. Comparing the background against both black and white using calculated contrast ratios is more reliable than choosing only by appearance.
Does changing HEX letter case change the colour?
No. #2563EB and #2563eb represent the same hexadecimal colour value.
Does SwiftVecto upload my colour data?
The interactive Colour Converter is designed to perform routine colour conversion and analysis directly inside your browser.
Is this Colour Converter free?
Yes. SwiftVecto provides this utility for converting and inspecting common web and design colour formats.
Things to Know
- RGB channels are represented using values from 0 to 255.
- HEX output uses hexadecimal representations of RGB channel values.
- HSL, HSV and HWB hue values are normally normalized to the range 0 through 360 degrees.
- Saturation, lightness, value, whiteness and blackness are represented as percentages.
- CMYK output is an RGB-derived mathematical estimate rather than a device-specific print profile conversion.
- Alpha values are normalized between 0 and 1 in the interactive implementation.
- Three-digit HEX input is expanded into six-digit representation before conversion.
- Eight-digit HEX may be used to represent RGB plus alpha where supported.
- Contrast calculations use relative luminance derived from RGB values.
- Normal interactive colour conversion is intended to happen directly inside the browser.
Disclaimer
Colour conversions shown by this tool are mathematical representations and do not guarantee identical appearance across physical devices, displays, printers or materials.
CMYK conversions are approximate and should not replace professional colour-profile management for commercial print production.
Accessibility contrast results are intended to assist design decisions but developers remain responsible for testing complete interfaces and applicable accessibility requirements.
Generated lighter, darker, complementary and grayscale colours are design aids rather than recommendations that a particular combination is visually or functionally appropriate.
Users remain responsible for validating converted values against the requirements of their target application or design workflow.
Official References
The following official resources were used when developing this tool and are useful for further reading.