Nächste benannte Farbe · #FF6970
#FF6970
Nächste benannte Farbe: Grenadine Pink
#FF6970 (rgb(255 105 112), hsl(357 100% 71%), oklch(0.71 0.183 20.3)) liegt am nächsten an der benannten Farbe Grenadine Pink. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#FF6970
oklch(0.71 0.183 20.3)
Farbumrechnungen
- HEX
- #ff6970
- RGB
- rgb(255 105 112)
- HSL
- hsl(357 100% 71%)
- HWB
- hwb(357 41% 0%)
- OKLCH
- oklch(0.71 0.183 20.3)
- OKLab
- oklab(0.71 0.172 0.063)
- CIE Lab
- lab(64.45 58.55 27.11)
- LCH
- lch(64.45 64.52 24.8)
- CMYK
- cmyk(0% 59% 56% 0%)
Tints · Shades · Tones
Tints
- FF7A7E
- FF8A8C
- FF9A9A
- FFA9A8
- FFB8B6
- FFC6C5
- FFD5D3
- FFE3E2
- FFF1F0
Shades
- DE5A60
- BE4C51
- 9E3E43
- 803135
- 632427
- 48181A
- 2E0C0E
- 160404
- 030001
Tones
- F36D72
- E77174
- DB7476
- CF7777
- C27A79
- B67C7B
- A97D7C
- 9C7E7D
- 8E7F7F
Farbharmonien
Komplementär +180°
- FF6970
Grenadine Pink
- 00B8BF
≈ Cyan Sky
Analog -30° +30°
- FF6970
Grenadine Pink
- F26AB1
≈ Fugitive Flamingo
- F87810
≈ Liquid Lava
Triadisch +120° +240°
- FF6970
Grenadine Pink
- 59BC44
≈ Exit Light
- 68A0FF
≈ Âbi Blue
Geteilt komplementär +150° +210°
- FF6970
Grenadine Pink
- 00BD94
≈ Mountain Meadow
- 00B0E9
≈ Lynx Screen Blue
Tetradisch +90° +180° +270°
- FF6970
Grenadine Pink
- A8A900
≈ Honey and Thyme
- 00B8BF
≈ Cyan Sky
- A28CFF
≈ Cobalite
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.79:1 · APCA Lc 53
Ag
AAAAuf Schwarz
WCAG 7.50:1 · APCA Lc 49
Beste Textfarbe: #000000
WCAG 7.50:1 (AAA) · APCA Lc 49
Contrast pairs
Code-Snippets
CSS
:root {
--grenadine-pink: #ff6970;
--grenadine-pink-rgb: 255 105 112;
--grenadine-pink-oklch: oklch(0.71 0.183 20.3);
}
.element {
color: var(--grenadine-pink);
background-color: hsl(357 100% 71%);
border-color: oklch(0.71 0.183 20.3);
}Tailwind CSS v4
@theme {
--color-grenadine-pink: #ff6970;
--color-grenadine-pink-50: #ffe1dd;
--color-grenadine-pink-100: #ffd0cc;
--color-grenadine-pink-200: #ffb5b1;
--color-grenadine-pink-300: #ff8f8c;
--color-grenadine-pink-400: #f76a70;
--color-grenadine-pink-500: #e64050;
--color-grenadine-pink-600: #c23844;
--color-grenadine-pink-700: #9c2d36;
--color-grenadine-pink-800: #751f29;
--color-grenadine-pink-900: #52141b;
--color-grenadine-pink-950: #37050c;
}SCSS
$grenadine-pink: #ff6970;
$grenadine-pink-rgb: 255, 105, 112;
$grenadine-pink-light: mix(#fff, $grenadine-pink, 20%);
$grenadine-pink-dark: mix(#000, $grenadine-pink, 20%);
.element {
color: $grenadine-pink;
box-shadow: 0 0 0 2px rgba($grenadine-pink, 0.35);
}