Named color · #F7504A
Pumping Spice
Pumping Spice is #F7504A: rgb(247 80 74), hsl(2 92% 63%), oklch(0.663 0.204 26.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Pumping Spice color name →
#F7504A
oklch(0.663 0.204 26.4)
Color conversions
- HEX
- #f7504a
- RGB
- rgb(247 80 74)
- HSL
- hsl(2 92% 63%)
- HWB
- hwb(2 29% 3%)
- OKLCH
- oklch(0.663 0.204 26.4)
- OKLab
- oklab(0.663 0.183 0.091)
- CIE Lab
- lab(58.84 64.15 41.31)
- LCH
- lch(58.84 76.3 32.8)
- CMYK
- cmyk(0% 68% 70% 3%)
Tints · Shades · Tones
Tints
- FB665D
- FE796F
- FF8C81
- FF9D93
- FFAEA5
- FFBFB6
- FFCFC8
- FFDFDA
- FFEFED
Shades
- D7443F
- B73935
- 992E2A
- 7C2420
- 601A17
- 45100E
- 2C0706
- 150202
- 030000
Tones
- EC5951
- E16057
- D6665D
- CB6B63
- C07068
- B4746D
- A87872
- 9B7B77
- 8E7E7C
Color harmonies
Complementary +180°
- F7504A
Pumping Spice
- 00A6B5
≈ Exotic Sea
Analogous -30° +30°
- F7504A
Pumping Spice
- ED4E96
≈ Tutuji Pink
- DB7400
≈ Gold Orange
Triadic +120° +240°
- F7504A
Pumping Spice
- 00B13C
≈ Poison Ivy
- 608BFF
≈ Deep Denim
Split-complementary +150° +210°
- F7504A
Pumping Spice
- 00AB91
≈ Shindig
- 009EDF
≈ Homeworld
Tetradic +90° +180° +270°
- F7504A
Pumping Spice
- 8E9E00
≈ Noxious
- 00A6B5
≈ Exotic Sea
- A270FF
≈ Purple Illusionist
Contrast & accessibility
Ag
FailOn white
WCAG 3.38:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.20:1 · APCA Lc 42
Best text color: #000000
WCAG 6.20:1 (AA) · APCA Lc 42
Contrast pairs
Code snippets
CSS
:root {
--pumping-spice: #f7504a;
--pumping-spice-rgb: 247 80 74;
--pumping-spice-oklch: oklch(0.663 0.204 26.4);
}
.element {
color: var(--pumping-spice);
background-color: hsl(2 92% 63%);
border-color: oklch(0.663 0.204 26.4);
}Tailwind CSS v4
@theme {
--color-pumping-spice: #f7504a;
--color-pumping-spice-50: #ffe0d4;
--color-pumping-spice-100: #ffcec1;
--color-pumping-spice-200: #ffb2a2;
--color-pumping-spice-300: #ff8a7a;
--color-pumping-spice-400: #ff625a;
--color-pumping-spice-500: #f03133;
--color-pumping-spice-600: #ca2c2c;
--color-pumping-spice-700: #a32423;
--color-pumping-spice-800: #7a171b;
--color-pumping-spice-900: #560f12;
--color-pumping-spice-950: #3a0104;
}SCSS
$pumping-spice: #f7504a;
$pumping-spice-rgb: 247, 80, 74;
$pumping-spice-light: mix(#fff, $pumping-spice, 20%);
$pumping-spice-dark: mix(#000, $pumping-spice, 20%);
.element {
color: $pumping-spice;
box-shadow: 0 0 0 2px rgba($pumping-spice, 0.35);
}