이름 색상 · #71A2D4
Kindred
Kindred은(는) #71A2D4: rgb(113 162 212), hsl(210 54% 64%), oklch(0.697 0.091 249.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Kindred color name →
#71A2D4
oklch(0.697 0.091 249.7)
색상 변환
- HEX
- #71a2d4
- RGB
- rgb(113 162 212)
- HSL
- hsl(210 54% 64%)
- HWB
- hwb(210 44% 17%)
- OKLCH
- oklch(0.697 0.091 249.7)
- OKLab
- oklab(0.697 -0.031 -0.085)
- CIE Lab
- lab(64.62 -6.68 -31.09)
- LCH
- lch(64.62 31.8 257.9)
- CMYK
- cmyk(47% 24% 0% 17%)
틴트 · 셰이드 · 톤
틴트
- 7FABD9
- 8DB5DD
- 9BBEE2
- A9C7E6
- B7D0EA
- C6DAEF
- D4E3F3
- E2ECF7
- F1F6FB
셰이드
- 618CB8
- 52779D
- 436383
- 354F69
- 273C51
- 1A2A3A
- 0E1924
- 040A10
- 010102
톤
- 739FCC
- 759BC3
- 7798BB
- 7995B2
- 7A91AA
- 7B8EA1
- 7D8B99
- 7E8791
- 7F8488
색 조화
보색 +180°
- 71A2D4
Kindred
- C2935D
≈ Mid Tan
유사색 -30° +30°
- 71A2D4
Kindred
- 55ABC4
≈ Blue Mist
- 9298D5
≈ Portage
삼각 배색 +120° +240°
- 71A2D4
Kindred
- CF8691
≈ Rose Sachet
- 8BA96C
≈ Peeled Asparagus
분열 보색 +150° +210°
- 71A2D4
Kindred
- CE8A73
≈ Rosy Copper
- AB9F5A
≈ Mediaeval Sulphur
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.68:1 · APCA Lc 52
Ag
AAA검은색 위
WCAG 7.82:1 · APCA Lc 50
가장 좋은 글자색: #000000
WCAG 7.82:1 (AAA) · APCA Lc 50
Contrast pairs
코드 스니펫
CSS
:root {
--kindred: #71a2d4;
--kindred-rgb: 113 162 212;
--kindred-oklch: oklch(0.697 0.091 249.7);
}
.element {
color: var(--kindred);
background-color: hsl(210 54% 64%);
border-color: oklch(0.697 0.091 249.7);
}Tailwind CSS v4
@theme {
--color-kindred: #71a2d4;
--color-kindred-50: #e3f8ff;
--color-kindred-100: #d3ebff;
--color-kindred-200: #b9d8fb;
--color-kindred-300: #96bbe5;
--color-kindred-400: #74a3d2;
--color-kindred-500: #558ac0;
--color-kindred-600: #4875a2;
--color-kindred-700: #3a5e82;
--color-kindred-800: #274560;
--color-kindred-900: #1a3043;
--color-kindred-950: #0b1c2c;
}SCSS
$kindred: #71a2d4;
$kindred-rgb: 113, 162, 212;
$kindred-light: mix(#fff, $kindred, 20%);
$kindred-dark: mix(#000, $kindred, 20%);
.element {
color: $kindred;
box-shadow: 0 0 0 2px rgba($kindred, 0.35);
}