이름 색상 · #F5B4BD
Squid Pink
Squid Pink은(는) #F5B4BD: rgb(245 180 189), hsl(352 76% 83%), oklch(0.832 0.076 9.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Squid Pink color name →
#F5B4BD
oklch(0.832 0.076 9.7)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- F7BCC3
- F8C3CA
- F9CAD0
- FAD2D7
- FCD9DE
- FCE1E4
- FDE8EB
- FEF0F2
- FFF7F8
셰이드
- D59CA4
- B6858C
- 986E74
- 7B585D
- 5F4447
- 443033
- 2B1D1F
- 150C0D
- 030202
톤
- E9AFB7
- DDAAB0
- D1A4AA
- C69FA4
- BA9A9E
- AE9598
- A39092
- 978A8C
- 8C8586
색 조화
보색 +180°
- F5B4BD
Squid Pink
- 8CD9D3
≈ Rainwater
유사색 -30° +30°
- F5B4BD
Squid Pink
- EBB5D8
≈ Soft Cashmere
- F4B8A3
≈ Antique Cameo
삼각 배색 +120° +240°
- F5B4BD
Squid Pink
- B8D39E
≈ In Good Taste
- A2CDF8
≈ Baby Blue
분열 보색 +150° +210°
- F5B4BD
Squid Pink
- 9DD8B7
≈ Nihilakh Oxide
- 8ED4EA
≈ Slightly Spritzig
사각 배색 +90° +180° +270°
- F5B4BD
Squid Pink
- D4CA90
≈ Royal Goblet
- 8CD9D3
≈ Rainwater
- BDC3FA
≈ Light Periwinkle
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.72:1 · APCA Lc 31
Ag
AAA검은색 위
WCAG 12.14:1 · APCA Lc 72
가장 좋은 글자색: #000000
WCAG 12.14:1 (AAA) · APCA Lc 72
Contrast pairs
코드 스니펫
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);
}