Nearest named color · #F04200
#F04200
Nearest named color: Glowing Meteor
#F04200 (rgb(240 66 0), hsl(17 100% 47%), oklch(0.632 0.218 35.7)) is closest to the named color Glowing Meteor. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F04200
oklch(0.632 0.218 35.7)
Color conversions
- HEX
- #f04200
- RGB
- rgb(240 66 0)
- HSL
- hsl(17 100% 47%)
- HWB
- hwb(17 0% 6%)
- OKLCH
- oklch(0.632 0.218 35.7)
- OKLab
- oklab(0.632 0.177 0.127)
- CIE Lab
- lab(55.37 65.55 67.78)
- LCH
- lch(55.37 94.29 46)
- CMYK
- cmyk(0% 73% 100% 6%)
Tints · Shades · Tones
Tints
- F55B32
- F9714D
- FC8565
- FF977C
- FFA992
- FFBBA8
- FFCCBD
- FFDDD3
- FFEEE9
Shades
- D13800
- B22F00
- 952500
- 781C00
- 5D1400
- 430B00
- 2A0500
- 140100
- 030000
Tones
- E64E23
- DC5734
- D25F41
- C7664C
- BD6C56
- B2715F
- A67568
- 9A7970
- 8E7D78
Color harmonies
Complementary +180°
- F04200
Glowing Meteor
- 009AB5
≈ Barrier Reef
Analogous -30° +30°
- F04200
Glowing Meteor
- EC3876
≈ Amor
- C27500
≈ Dirty Orange
Triadic +120° +240°
- F04200
Glowing Meteor
- 00A460
≈ Alhambra Green
- 6C77FF
≈ Byzantine Night Blue
Split-complementary +150° +210°
- F04200
Glowing Meteor
- 009F93
≈ Alhambra
- 0090E4
≈ Bleu de France
Tetradic +90° +180° +270°
- F04200
Glowing Meteor
- 729A00
≈ Green Thumb
- 009AB5
≈ Barrier Reef
- AB5BF0
≈ Light Shōtoku Purple
Contrast & accessibility
Ag
FailOn white
WCAG 3.82:1 · APCA Lc 64
Ag
AAOn black
WCAG 5.48:1 · APCA Lc 37
Best text color: #000000
WCAG 5.48:1 (AA) · APCA Lc 37
Contrast pairs
Code snippets
CSS
:root {
--glowing-meteor: #f04200;
--glowing-meteor-rgb: 240 66 0;
--glowing-meteor-oklch: oklch(0.632 0.218 35.7);
}
.element {
color: var(--glowing-meteor);
background-color: hsl(17 100% 47%);
border-color: oklch(0.632 0.218 35.7);
}Tailwind CSS v4
@theme {
--color-glowing-meteor: #f04200;
--color-glowing-meteor-50: #ffe0c9;
--color-glowing-meteor-100: #ffcfb3;
--color-glowing-meteor-200: #ffb28f;
--color-glowing-meteor-300: #ff8a60;
--color-glowing-meteor-400: #ff6134;
--color-glowing-meteor-500: #f42b00;
--color-glowing-meteor-600: #ce2800;
--color-glowing-meteor-700: #a62100;
--color-glowing-meteor-800: #7c1400;
--color-glowing-meteor-900: #580d00;
--color-glowing-meteor-950: #3b0000;
}SCSS
$glowing-meteor: #f04200;
$glowing-meteor-rgb: 240, 66, 0;
$glowing-meteor-light: mix(#fff, $glowing-meteor, 20%);
$glowing-meteor-dark: mix(#000, $glowing-meteor, 20%);
.element {
color: $glowing-meteor;
box-shadow: 0 0 0 2px rgba($glowing-meteor, 0.35);
}