Saffron is a medium, vivid shade in the yellow color family, with a warm feel. Its HEX code is #F4C430, which equals rgb(244, 196, 48) in RGB and hsl(45, 90%, 57%) in HSL. In print terms it converts to roughly C0 M20 Y80 K4, although exact CMYK results depend on the paper and color profile.
- HEX
#F4C430 - RGB
244, 196, 48 - HSL
45°, 90%, 57% - CMYK
0, 20, 80, 4 - Family
Yellow - Tone
Medium, vivid
About Saffron
Yellow shades are bright, sunny and attention-grabbing. They suggest optimism and clarity, and are often used for highlights, warnings and happy, youthful designs. Designers often reach for it as an accent, a button color or a background tint. Text in black is the most readable choice on this color, with a contrast ratio of 12.79:1. Its complementary color is #2F60F4.
Download Saffron as an image
Choose a size and format, then download a solid-color image — or tick colors in the library to batch-download a ZIP.
Loading colors…
Loading gradients…
Saffron color codes
| HEX | #F4C430 |
|---|---|
| RGB | rgb(244, 196, 48) |
| HSL | hsl(45, 90%, 57%) |
| HSV | 45°, 80%, 96% |
| CMYK | 0%, 20%, 80%, 4% |
| Decimal | 16041008 |
Shades and tints of Saffron
Lighter tints are mixed with white and darker shades are mixed with black.
- 50
#FDF5DD - 100
#FBEBBA - 200
#FAE298 - 300
#F8D875 - 400
#F6CE53 - 500
#F4C430 - 600
#CBA328 - 700
#A38320 - 800
#7A6218 - 900
#514110 - 950
#292108
Color harmonies for Saffron
- Complementary
#2F60F4≈ Medium Light Sapphire - Analogous −30°
#F4602F≈ Medium Light Cinnabar - Analogous +30°
#C3F42F≈ Medium Light Chartreuse - Triadic +120°
#2FF4C3≈ Medium Light Aquamarine - Triadic +240°
#C32FF4≈ Medium Light Grape - Split 150°
#2FC3F4≈ Medium Light Capri - Split 210°
#602FF4≈ Medium Light Iris
Contrast and accessibility of Saffron
| Text color | Sample | Contrast ratio | WCAG |
|---|---|---|---|
| White text on Saffron | Aa | 1.64:1 | Fails |
| Black text on Saffron | Aa | 12.79:1 | AAA (excellent) |
CSS code for Saffron
background-color: #F4C430;color: #F4C430;background-color: rgb(244, 196, 48);background-color: hsl(45, 90%, 57%);:root { --color-saffron: #F4C430; }class="bg-[#F4C430]"Colors similar to Saffron
- Medium Light Amber
#FFBF29 - Medium Light Bright Marigold
#EAC73E - Medium Light Bright Amber
#EAB63E - Medium Light Marigold
#FFD429 - Bright Marigold
#E6BD19 - Medium Light Bright Gold
#EAD83E - Bright Gold
#E6D119 - Light Amber
#FFCB52 - Light Tangerine
#FFBA52 - Medium Light Tangerine
#FFA929 - Medium Light Bright Tangerine
#EAA53E - Bright Amber
#E6A819
More yellow shades
- Mustard
#FFDB58 - Cream
#FFFDD0 - Brass
#B5A642 - Citron
#DFFF00 - Lemon
#FFF700 - Canary
#FFFF99 - Pure Marigold
#FFCC00 - Medium Light Marigold
#FFD429 - Light Marigold
#FFDC52 - Pale Marigold
#FFE47A - Very Pale Marigold
#FFEDA3
Frequently asked questions
What is the HEX code for Saffron?
The HEX code for Saffron is #F4C430.
What is the RGB value of Saffron?
Saffron has an RGB value of 244, 196, 48 (rgb(244, 196, 48)). In HSL it is 45°, 90%, 57%.
What text color should I use on Saffron?
Use black text on Saffron. White text has a contrast ratio of 1.64:1 and black text has 12.79:1; WCAG AA requires at least 4.5:1 for normal text.
What color goes well with Saffron?
The complementary color of Saffron is #2F60F4. Analogous colors #F4602F and #C3F42F also pair well.