Benannte Farbe · #F56C73
Sugar Coral
Sugar Coral ist #F56C73: rgb(245 108 115), hsl(357 87% 69%), oklch(0.7 0.168 19.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Sugar Coral color name →
#F56C73
oklch(0.7 0.168 19.4)
Farbumrechnungen
- HEX
- #f56c73
- RGB
- rgb(245 108 115)
- HSL
- hsl(357 87% 69%)
- HWB
- hwb(357 42% 4%)
- OKLCH
- oklch(0.7 0.168 19.4)
- OKLab
- oklab(0.7 0.159 0.056)
- CIE Lab
- lab(63.43 54.02 23.73)
- LCH
- lch(63.43 59 23.7)
- CMYK
- cmyk(0% 56% 53% 4%)
Tints · Shades · Tones
Tints
- F87C81
- FB8C8E
- FD9B9C
- FFAAAA
- FFB8B8
- FFC6C6
- FFD5D4
- FFE3E2
- FFF1F0
Shades
- D55D63
- B64E54
- 984045
- 7B3236
- 5F2528
- 44191B
- 2B0D0F
- 150405
- 030001
Tones
- EA7075
- DF7376
- D47678
- C97879
- BD7A7A
- B27C7C
- A67D7D
- 9A7E7E
- 8D7F7F
Farbharmonien
Komplementär +180°
- F56C73
Sugar Coral
- 00B4BB
≈ Cyan Sky
Analog -30° +30°
- F56C73
Sugar Coral
- E86DAE
≈ Amaranth
- EF792B
≈ Orange Gluttony
Triadisch +120° +240°
- F56C73
Sugar Coral
- 61B749
≈ Pure Apple
- 609DFF
≈ Blue Chaos
Geteilt komplementär +150° +210°
- F56C73
Sugar Coral
- 00BA90
≈ Mountain Meadow
- 00ADE3
≈ Royal Peacock
Tetradisch +90° +180° +270°
- F56C73
Sugar Coral
- A6A500
≈ Jīn Sè Gold
- 00B4BB
≈ Cyan Sky
- 9E89FF
≈ Lavender Blue Shadow
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.88:1 · APCA Lc 54
Ag
AAAAuf Schwarz
WCAG 7.27:1 · APCA Lc 47
Beste Textfarbe: #000000
WCAG 7.27:1 (AAA) · APCA Lc 47
Contrast pairs
Code-Snippets
CSS
:root {
--sugar-coral: #f56c73;
--sugar-coral-rgb: 245 108 115;
--sugar-coral-oklch: oklch(0.7 0.168 19.4);
}
.element {
color: var(--sugar-coral);
background-color: hsl(357 87% 69%);
border-color: oklch(0.7 0.168 19.4);
}Tailwind CSS v4
@theme {
--color-sugar-coral: #f56c73;
--color-sugar-coral-50: #ffe3e0;
--color-sugar-coral-100: #ffd2cf;
--color-sugar-coral-200: #ffb7b5;
--color-sugar-coral-300: #ff9291;
--color-sugar-coral-400: #f16f75;
--color-sugar-coral-500: #df4a57;
--color-sugar-coral-600: #bd404a;
--color-sugar-coral-700: #98333b;
--color-sugar-coral-800: #71232c;
--color-sugar-coral-900: #50181e;
--color-sugar-coral-950: #35070e;
}SCSS
$sugar-coral: #f56c73;
$sugar-coral-rgb: 245, 108, 115;
$sugar-coral-light: mix(#fff, $sugar-coral, 20%);
$sugar-coral-dark: mix(#000, $sugar-coral, 20%);
.element {
color: $sugar-coral;
box-shadow: 0 0 0 2px rgba($sugar-coral, 0.35);
}