Benannte Farbe · #F5B4BD
Squid Pink
Squid Pink ist #F5B4BD: rgb(245 180 189), hsl(352 76% 83%), oklch(0.832 0.076 9.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Squid Pink color name →
#F5B4BD
oklch(0.832 0.076 9.7)
Farbumrechnungen
- HEX
- #f5b4bd
- RGB
- rgb(245 180 189)
- HSL
- hsl(352 76% 83%)
- HWB
- hwb(352 71% 4%)
- OKLCH
- oklch(0.832 0.076 9.7)
- OKLab
- oklab(0.832 0.075 0.013)
- CIE Lab
- lab(79.68 25.25 5.23)
- LCH
- lch(79.68 25.79 11.7)
- CMYK
- cmyk(0% 27% 23% 4%)
Tints · Shades · Tones
Tints
- F7BCC3
- F8C3CA
- F9CAD0
- FAD2D7
- FCD9DE
- FCE1E4
- FDE8EB
- FEF0F2
- FFF7F8
Shades
- D59CA4
- B6858C
- 986E74
- 7B585D
- 5F4447
- 443033
- 2B1D1F
- 150C0D
- 030202
Tones
- E9AFB7
- DDAAB0
- D1A4AA
- C69FA4
- BA9A9E
- AE9598
- A39092
- 978A8C
- 8C8586
Farbharmonien
Komplementär +180°
- F5B4BD
Squid Pink
- 8CD9D3
≈ Rainwater
Analog -30° +30°
- F5B4BD
Squid Pink
- EBB5D8
≈ Soft Cashmere
- F4B8A3
≈ Antique Cameo
Triadisch +120° +240°
- F5B4BD
Squid Pink
- B8D39E
≈ In Good Taste
- A2CDF8
≈ Baby Blue
Geteilt komplementär +150° +210°
- F5B4BD
Squid Pink
- 9DD8B7
≈ Nihilakh Oxide
- 8ED4EA
≈ Slightly Spritzig
Tetradisch +90° +180° +270°
- F5B4BD
Squid Pink
- D4CA90
≈ Royal Goblet
- 8CD9D3
≈ Rainwater
- BDC3FA
≈ Light Periwinkle
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.72:1 · APCA Lc 31
Ag
AAAAuf Schwarz
WCAG 12.14:1 · APCA Lc 72
Beste Textfarbe: #000000
WCAG 12.14:1 (AAA) · APCA Lc 72
Contrast pairs
Code-Snippets
CSS
:root {
--squid-pink: #f5b4bd;
--squid-pink-rgb: 245 180 189;
--squid-pink-oklch: oklch(0.832 0.076 9.7);
}
.element {
color: var(--squid-pink);
background-color: hsl(352 76% 83%);
border-color: oklch(0.832 0.076 9.7);
}Tailwind CSS v4
@theme {
--color-squid-pink: #f5b4bd;
--color-squid-pink-50: #ffedef;
--color-squid-pink-100: #ffdee1;
--color-squid-pink-200: #f3c8cc;
--color-squid-pink-300: #dba8ad;
--color-squid-pink-400: #c78c94;
--color-squid-pink-500: #b2717b;
--color-squid-pink-600: #976068;
--color-squid-pink-700: #794c53;
--color-squid-pink-800: #59373d;
--color-squid-pink-900: #3e262a;
--color-squid-pink-950: #271418;
}SCSS
$squid-pink: #f5b4bd;
$squid-pink-rgb: 245, 180, 189;
$squid-pink-light: mix(#fff, $squid-pink, 20%);
$squid-pink-dark: mix(#000, $squid-pink, 20%);
.element {
color: $squid-pink;
box-shadow: 0 0 0 2px rgba($squid-pink, 0.35);
}