Adlandırılmış renk · #F5B4BD
Squid Pink
Squid Pink, #F5B4BD: rgb(245 180 189), hsl(352 76% 83%), oklch(0.832 0.076 9.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Squid Pink color name →
#F5B4BD
oklch(0.832 0.076 9.7)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F7BCC3
- F8C3CA
- F9CAD0
- FAD2D7
- FCD9DE
- FCE1E4
- FDE8EB
- FEF0F2
- FFF7F8
Koyu tonlar
- D59CA4
- B6858C
- 986E74
- 7B585D
- 5F4447
- 443033
- 2B1D1F
- 150C0D
- 030202
Gri tonlar
- E9AFB7
- DDAAB0
- D1A4AA
- C69FA4
- BA9A9E
- AE9598
- A39092
- 978A8C
- 8C8586
Renk uyumları
Tamamlayıcı +180°
- F5B4BD
Squid Pink
- 8CD9D3
≈ Rainwater
Analog -30° +30°
- F5B4BD
Squid Pink
- EBB5D8
≈ Soft Cashmere
- F4B8A3
≈ Antique Cameo
Üçlü +120° +240°
- F5B4BD
Squid Pink
- B8D39E
≈ In Good Taste
- A2CDF8
≈ Baby Blue
Bölünmüş tamamlayıcı +150° +210°
- F5B4BD
Squid Pink
- 9DD8B7
≈ Nihilakh Oxide
- 8ED4EA
≈ Slightly Spritzig
Dörtlü +90° +180° +270°
- F5B4BD
Squid Pink
- D4CA90
≈ Royal Goblet
- 8CD9D3
≈ Rainwater
- BDC3FA
≈ Light Periwinkle
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.72:1 · APCA Lc 31
Ag
AAASiyah üzerinde
WCAG 12.14:1 · APCA Lc 72
En iyi metin rengi: #000000
WCAG 12.14:1 (AAA) · APCA Lc 72
Contrast pairs
Kod parçacıkları
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);
}