가장 가까운 이름 색상 · #87AFD5
#87AFD5
가장 가까운 이름 색상: High Seas
#87AFD5(rgb(135 175 213), hsl(209 48% 68%), oklch(0.739 0.07 247.5))와 가장 가까운 이름 색상은 High Seas입니다. 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
#87AFD5
oklch(0.739 0.07 247.5)
색상 변환
- HEX
- #87afd5
- RGB
- rgb(135 175 213)
- HSL
- hsl(209 48% 68%)
- HWB
- hwb(209 53% 16%)
- OKLCH
- oklch(0.739 0.07 247.5)
- OKLab
- oklab(0.739 -0.027 -0.065)
- CIE Lab
- lab(69.58 -6.88 -23.94)
- LCH
- lch(69.58 24.9 254)
- CMYK
- cmyk(37% 18% 0% 16%)
틴트 · 셰이드 · 톤
틴트
- 93B7D9
- 9FBFDE
- ABC7E2
- B6CFE6
- C2D7EB
- CEDFEF
- DAE7F3
- E7EFF7
- F3F7FB
셰이드
- 7598B9
- 63819E
- 516B83
- 41566A
- 314151
- 212E3A
- 131C24
- 060B10
- 010102
톤
- 87AACC
- 86A6C4
- 86A1BB
- 859CB3
- 8497AA
- 8493A2
- 838E99
- 828991
- 818588
색 조화
보색 +180°
- 87AFD5
High Seas
- C9A27B
≈ Fresh Sawdust
유사색 -30° +30°
- 87AFD5
High Seas
- 76B6C8
≈ Tennis Blue
- 9FA7D7
≈ Sorbet Ice Mauve
삼각 배색 +120° +240°
- 87AFD5
High Seas
- D298A2
≈ Cooing Doves
- 9EB383
≈ Mesclun Green
분열 보색 +150° +210°
- 87AFD5
High Seas
- D29B8B
≈ Nectarine Spice
- B6AB78
≈ Heavy Goldbrown
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.30:1 · APCA Lc 45
Ag
AAA검은색 위
WCAG 9.12:1 · APCA Lc 57
가장 좋은 글자색: #000000
WCAG 9.12:1 (AAA) · APCA Lc 57
Contrast pairs
코드 스니펫
CSS
:root {
--high-seas: #87afd5;
--high-seas-rgb: 135 175 213;
--high-seas-oklch: oklch(0.739 0.07 247.5);
}
.element {
color: var(--high-seas);
background-color: hsl(209 48% 68%);
border-color: oklch(0.739 0.07 247.5);
}Tailwind CSS v4
@theme {
--color-high-seas: #87afd5;
--color-high-seas-50: #e6f7ff;
--color-high-seas-100: #d7eaff;
--color-high-seas-200: #bed7f2;
--color-high-seas-300: #9cbbdb;
--color-high-seas-400: #7da3c6;
--color-high-seas-500: #608bb3;
--color-high-seas-600: #517597;
--color-high-seas-700: #415e79;
--color-high-seas-800: #2d4559;
--color-high-seas-900: #1f303e;
--color-high-seas-950: #0e1c28;
}SCSS
$high-seas: #87afd5;
$high-seas-rgb: 135, 175, 213;
$high-seas-light: mix(#fff, $high-seas, 20%);
$high-seas-dark: mix(#000, $high-seas, 20%);
.element {
color: $high-seas;
box-shadow: 0 0 0 2px rgba($high-seas, 0.35);
}