Pick a Colour
Select a colour below or enter a Hex, RGB or HSL code to convert between formats.
Colour Palette
---Understanding Colour Formats and Their Applications
Different colour formats serve various purposes in digital design and development. This tool provides Hex, RGB, and HSL values for your chosen colour. Here's a quick look at where each format is commonly applied:
Hexadecimal (Hex) Colour Codes
Hex codes are perhaps the most widely recognized and used colour format in web development. They are concise and directly map to RGB values.
- Format: Starts with a '#' followed by six hexadecimal characters (e.g., `#RRGGBB`). Shorthand three-character versions exist for repeating pairs (e.g., `#FFF` for `#FFFFFF`).
- Applications:
- Web Design (CSS & HTML): The primary way to define colours for text, backgrounds, borders, and other elements in stylesheets and HTML.
- Graphic Design Software: Commonly used for specifying colours in tools like Photoshop, Illustrator, and Figma due to its widespread compatibility.
- APIs & Configuration: Often used in APIs and configuration files where colour values need to be easily parsable strings.
RGB (Red, Green, Blue) Colour Codes
RGB defines colours by combining varying intensities of red, green, and blue light. It's an additive colour model, meaning when all three are at full intensity, they create white.
- Format: `rgb(R, G, B)`, where R, G, and B are integers from 0 to 255.
- Applications:
- Web Design (CSS): Used in CSS, especially when dynamic colour manipulation (e.g., JavaScript) is involved, or when defining colours with transparency (`rgba()`).
- Digital Displays: The fundamental way screens (monitors, TVs, phones) produce colours, as they emit red, green, and blue light.
- Image Editing: Core colour model for digital images, allowing precise control over colour components.
HSL (Hue, Saturation, Lightness) Colour Codes
HSL describes colours in a way that is often more intuitive for humans, aligning with how we perceive colour. It separates the colour (hue) from its intensity (saturation) and brightness (lightness).
- Format: `hsl(H, S%, L%)`, where H (hue) is a degree on the colour wheel (0-360), S (saturation) and L (lightness) are percentages (0-100%).
- Applications:
- Web Design (CSS): Gaining popularity in CSS for its ease of use in creating colour variations (e.g., lighter/darker shades, desaturated versions) by simply adjusting the `S` or `L` values.
- Theming & Palettes: Ideal for creating coherent colour themes, as it's straightforward to derive complementary or analogous colours by adjusting the hue while keeping saturation and lightness consistent.
- User Interfaces: Developers find HSL useful for programmatically generating colour schemes for UI elements.