Named color · #F7BC5C
Fizzy Peach
Fizzy Peach is #F7BC5C: rgb(247 188 92), hsl(37 91% 66%), oklch(0.831 0.131 77.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Fizzy Peach color name →
#F7BC5C
oklch(0.831 0.131 77.4)
Color conversions
- HEX
- #f7bc5c
- RGB
- rgb(247 188 92)
- HSL
- hsl(37 91% 66%)
- HWB
- hwb(37 36% 3%)
- OKLCH
- oklch(0.831 0.131 77.4)
- OKLab
- oklab(0.831 0.029 0.128)
- CIE Lab
- lab(80.4 14.77 55.96)
- LCH
- lch(80.4 57.88 75.2)
- CMYK
- cmyk(0% 24% 63% 3%)
Tints · Shades · Tones
Tints
- F8C370
- F9CA81
- FAD192
- FBD8A3
- FCDEB3
- FDE5C2
- FDECD1
- FEF2E1
- FFF9F0
Shades
- D7A34F
- B78B42
- 997336
- 7C5D2A
- 60471F
- 453214
- 2C1F0A
- 150D03
- 030200
Tones
- EBB663
- DFB068
- D2AA6D
- C6A471
- BA9E75
- AF9878
- A3927A
- 978C7D
- 8C867E
Color harmonies
Complementary +180°
- F7BC5C
Fizzy Peach
- A5CAFF
≈ Night Snow
Analogous -30° +30°
- F7BC5C
Fizzy Peach
- FFB38E
≈ Coral Dusk
- D1CE61
≈ Quince
Triadic +120° +240°
- F7BC5C
Fizzy Peach
- 37E1E5
≈ Neon Nazar
- EAADFF
≈ Pink Sugar
Split-complementary +150° +210°
- F7BC5C
Fizzy Peach
- 73D6FF
≈ Sky
- C3BFFF
≈ Lavender Tonic
Tetradic +90° +180° +270°
- F7BC5C
Fizzy Peach
- 63E3B6
≈ Ocean in a Bowl
- A5CAFF
≈ Night Snow
- FFA9D6
≈ Corinthian Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.70:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.30:1 · APCA Lc 72
Best text color: #000000
WCAG 12.30:1 (AAA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--fizzy-peach: #f7bc5c;
--fizzy-peach-rgb: 247 188 92;
--fizzy-peach-oklch: oklch(0.831 0.131 77.4);
}
.element {
color: var(--fizzy-peach);
background-color: hsl(37 91% 66%);
border-color: oklch(0.831 0.131 77.4);
}Tailwind CSS v4
@theme {
--color-fizzy-peach: #f7bc5c;
--color-fizzy-peach-50: #fff2cb;
--color-fizzy-peach-100: #ffe4b7;
--color-fizzy-peach-200: #f3ce94;
--color-fizzy-peach-300: #dbb066;
--color-fizzy-peach-400: #c99336;
--color-fizzy-peach-500: #b57800;
--color-fizzy-peach-600: #996600;
--color-fizzy-peach-700: #7b5100;
--color-fizzy-peach-800: #5c3a00;
--color-fizzy-peach-900: #412800;
--color-fizzy-peach-950: #291600;
}SCSS
$fizzy-peach: #f7bc5c;
$fizzy-peach-rgb: 247, 188, 92;
$fizzy-peach-light: mix(#fff, $fizzy-peach, 20%);
$fizzy-peach-dark: mix(#000, $fizzy-peach, 20%);
.element {
color: $fizzy-peach;
box-shadow: 0 0 0 2px rgba($fizzy-peach, 0.35);
}