이름 색상 · #B7CFE2
Tender Twilight
Tender Twilight은(는) #B7CFE2: rgb(183 207 226), hsl(207 43% 80%), oklch(0.843 0.037 241.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Blue mean? → · Tender Twilight color name →
#B7CFE2
oklch(0.843 0.037 241.9)
색상 변환
- HEX
- #b7cfe2
- RGB
- rgb(183 207 226)
- HSL
- hsl(207 43% 80%)
- HWB
- hwb(207 72% 11%)
- OKLCH
- oklch(0.843 0.037 241.9)
- OKLab
- oklab(0.843 -0.018 -0.033)
- CIE Lab
- lab(81.77 -5.36 -12.3)
- LCH
- lch(81.77 13.42 246.4)
- CMYK
- cmyk(19% 8% 0% 11%)
틴트 · 셰이드 · 톤
틴트
- BED4E5
- C5D9E8
- CCDDEB
- D4E2EE
- DBE7F1
- E2ECF3
- E9F0F6
- F0F5F9
- F8FAFC
셰이드
- 9FB4C4
- 8799A8
- 707F8C
- 5A6771
- 454F57
- 31383E
- 1E2327
- 0C1012
- 020203
톤
- B1C7D8
- ACBFCE
- A6B7C4
- A1AFBA
- 9BA7B0
- 969FA6
- 90979C
- 8B8F93
- 858889
색 조화
보색 +180°
- B7CFE2
Tender Twilight
- DEC7B3
≈ Playa Arenosa
유사색 -30° +30°
- B7CFE2
Tender Twilight
- B1D2D9
≈ Balboa
- C2CBE4
≈ Silver Sweetpea
삼각 배색 +120° +240°
- B7CFE2
Tender Twilight
- E1C2C9
≈ Bunny Pink
- C7D0B5
≈ Tender Greens
분열 보색 +150° +210°
- B7CFE2
Tender Twilight
- E3C3BD
≈ Golden Guernsey
- D4CBB1
≈ Aths Special
사각 배색 +90° +180° +270°
- B7CFE2
Tender Twilight
- DBC3D6
≈ Blissful
- DEC7B3
≈ Playa Arenosa
- BAD3C0
≈ Little Beaux Blue
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.61:1 · APCA Lc 27
Ag
AAA검은색 위
WCAG 13.03:1 · APCA Lc 76
가장 좋은 글자색: #000000
WCAG 13.03:1 (AAA) · APCA Lc 76
Contrast pairs
코드 스니펫
CSS
:root {
--tender-twilight: #b7cfe2;
--tender-twilight-rgb: 183 207 226;
--tender-twilight-oklch: oklch(0.843 0.037 241.9);
}
.element {
color: var(--tender-twilight);
background-color: hsl(207 43% 80%);
border-color: oklch(0.843 0.037 241.9);
}Tailwind CSS v4
@theme {
--color-tender-twilight: #b7cfe2;
--color-tender-twilight-50: #edf7ff;
--color-tender-twilight-100: #deeaf4;
--color-tender-twilight-200: #c7d6e3;
--color-tender-twilight-300: #a8bac9;
--color-tender-twilight-400: #8ca2b3;
--color-tender-twilight-500: #718a9d;
--color-tender-twilight-600: #607585;
--color-tender-twilight-700: #4c5d6a;
--color-tender-twilight-800: #37444e;
--color-tender-twilight-900: #262f36;
--color-tender-twilight-950: #141c21;
}SCSS
$tender-twilight: #b7cfe2;
$tender-twilight-rgb: 183, 207, 226;
$tender-twilight-light: mix(#fff, $tender-twilight, 20%);
$tender-twilight-dark: mix(#000, $tender-twilight, 20%);
.element {
color: $tender-twilight;
box-shadow: 0 0 0 2px rgba($tender-twilight, 0.35);
}