Benannte Farbe · #FF8866
Protein High
Protein High ist #FF8866: rgb(255 136 102), hsl(13 100% 70%), oklch(0.752 0.153 36.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Protein High color name →
#FF8866
oklch(0.752 0.153 36.8)
Farbumrechnungen
- HEX
- #ff8866
- RGB
- rgb(255 136 102)
- HSL
- hsl(13 100% 70%)
- HWB
- hwb(13 40% 0%)
- OKLCH
- oklch(0.752 0.153 36.8)
- OKLab
- oklab(0.752 0.122 0.091)
- CIE Lab
- lab(69.97 44.08 39.46)
- LCH
- lch(69.97 59.16 41.8)
- CMYK
- cmyk(0% 47% 60% 0%)
Tints · Shades · Tones
Tints
- FF9576
- FFA185
- FFAD95
- FFB9A4
- FFC5B3
- FFD1C2
- FFDDD1
- FFE8E0
- FFF4F0
Shades
- DE7558
- BE634A
- 9E523C
- 80412F
- 633123
- 482217
- 2E130C
- 160604
- 030100
Tones
- F3886A
- E6886D
- DA8870
- CD8773
- C18776
- B48678
- A7857A
- 9B837C
- 8D827E
Farbharmonien
Komplementär +180°
- FF8866
Protein High
- 00C2E5
≈ Caribbean Blue
Analog -30° +30°
- FF8866
Protein High
- FD819E
≈ Pink Makeup
- EE992C
≈ Nuclear Mango
Triadisch +120° +240°
- FF8866
Protein High
- 46CB86
≈ Paris Green
- 9AA6FF
≈ Widowmaker
Geteilt komplementär +150° +210°
- FF8866
Protein High
- 00C9BC
≈ Pristine Oceanic
- 60B5FF
≈ Tiān Lán Sky
Tetradisch +90° +180° +270°
- FF8866
Protein High
- 95C04B
≈ Early Spring
- 00C2E5
≈ Caribbean Blue
- C893FA
≈ Liliac
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.34:1 · APCA Lc 46
Ag
AAAAuf Schwarz
WCAG 8.96:1 · APCA Lc 56
Beste Textfarbe: #000000
WCAG 8.96:1 (AAA) · APCA Lc 56
Contrast pairs
Code-Snippets
CSS
:root {
--protein-high: #ff8866;
--protein-high-rgb: 255 136 102;
--protein-high-oklch: oklch(0.752 0.153 36.8);
}
.element {
color: var(--protein-high);
background-color: hsl(13 100% 70%);
border-color: oklch(0.752 0.153 36.8);
}Tailwind CSS v4
@theme {
--color-protein-high: #ff8866;
--color-protein-high-50: #ffe7d5;
--color-protein-high-100: #ffd7c3;
--color-protein-high-200: #ffbea4;
--color-protein-high-300: #fa9b7c;
--color-protein-high-400: #e97a5b;
--color-protein-high-500: #d75933;
--color-protein-high-600: #b64c2d;
--color-protein-high-700: #923d24;
--color-protein-high-800: #6d2a1a;
--color-protein-high-900: #4d1d11;
--color-protein-high-950: #330c04;
}SCSS
$protein-high: #ff8866;
$protein-high-rgb: 255, 136, 102;
$protein-high-light: mix(#fff, $protein-high, 20%);
$protein-high-dark: mix(#000, $protein-high, 20%);
.element {
color: $protein-high;
box-shadow: 0 0 0 2px rgba($protein-high, 0.35);
}