RAL to Hex
RAL is a European color standard used in industrial coatings and paints.
Color Formats Supported
- HEX: 6-digit hexadecimal codes (#FF5733)
- RGB: Red, Green, Blue values (255, 87, 51)
- HSL: Hue, Saturation, Lightness (11°, 100%, 60%)
- CMYK: Cyan, Magenta, Yellow, Key for print
Using Colors Effectively
1. Accessibility: Ensure sufficient contrast for text readability 2. Consistency: Use a defined palette throughout your project 3. Hierarchy: Use color to guide attention and establish importance 4. Brand: Maintain consistent colors across all materials
Color Theory Basics
- Primary colors: Red, blue, yellow (can't be mixed from other colors)
- Secondary colors: Orange, green, purple (mixed from primaries)
- Warm vs Cool: Warm colors (red, orange) feel energetic; cool colors (blue, green) feel calm
RAL Is Paint, Not Pixels
RAL is the European colour standard for paint, coatings and powder finishes — dominant in architecture, industrial equipment and automotive work. Like Pantone it names physical finishes, so any hex value is an approximation.
| System | Format | Domain |
|---|---|---|
| RAL Classic | 4 digits (RAL 5010) | Paints, coatings, industry |
| RAL Design | Hue-lightness-chroma | Architectural specification |
| Pantone | PMS number | Print and brand |
| NCS | Perceptual notation | Scandinavian architecture |
For a physical job, specify the RAL number and let the supplier match it. The hex is for the mockup only.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
``css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.