이름 색상 · #BAD3C7
Sage Bundle
Sage Bundle은(는) #BAD3C7: rgb(186 211 199), hsl(151 22% 78%), oklch(0.845 0.031 165.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Sage Bundle color name →
#BAD3C7
oklch(0.845 0.031 165.2)
색상 변환
- HEX
- #bad3c7
- RGB
- rgb(186 211 199)
- HSL
- hsl(151 22% 78%)
- HWB
- hwb(151 73% 17%)
- OKLCH
- oklch(0.845 0.031 165.2)
- OKLab
- oklab(0.845 -0.03 0.008)
- CIE Lab
- lab(82.42 -10.41 2.98)
- LCH
- lch(82.42 10.83 164)
- CMYK
- cmyk(12% 0% 6% 17%)
틴트 · 셰이드 · 톤
틴트
- C1D7CC
- C8DCD2
- CFE0D8
- D5E4DD
- DCE9E3
- E3EDE8
- EAF2EE
- F1F6F4
- F8FBF9
셰이드
- A1B7AD
- 899C93
- 72827A
- 5C6962
- 46514C
- 323A36
- 1E2421
- 0D100E
- 020202
톤
- B4CAC0
- AEC2B8
- A8B9B1
- A3B1AA
- 9DA9A3
- 97A09C
- 919895
- 8B908E
- 868887
색 조화
보색 +180°
- BAD3C7
Sage Bundle
- DCC4D1
≈ Scented Soap
유사색 -30° +30°
- BAD3C7
Sage Bundle
- C3D1BD
≈ Budding Green
- B5D3D2
≈ Lakeside Find
삼각 배색 +120° +240°
- BAD3C7
Sage Bundle
- C9CAE0
≈ Periwinkle Powder
- DFC6BB
≈ Pale Sienna
분열 보색 +150° +210°
- BAD3C7
Sage Bundle
- D4C6DB
≈ Prudence
- E0C4C5
≈ Odyssey Plum
사각 배색 +90° +180° +270°
- BAD3C7
Sage Bundle
- BFCEE1
≈ Sky’s the Limit
- DCC4D1
≈ Scented Soap
- D8CAB6
≈ Brown Mouse
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.58:1 · APCA Lc 27
Ag
AAA검은색 위
WCAG 13.23:1 · APCA Lc 76
가장 좋은 글자색: #000000
WCAG 13.23:1 (AAA) · APCA Lc 76
Contrast pairs
코드 스니펫
CSS
:root {
--sage-bundle: #bad3c7;
--sage-bundle-rgb: 186 211 199;
--sage-bundle-oklch: oklch(0.845 0.031 165.2);
}
.element {
color: var(--sage-bundle);
background-color: hsl(151 22% 78%);
border-color: oklch(0.845 0.031 165.2);
}Tailwind CSS v4
@theme {
--color-sage-bundle: #bad3c7;
--color-sage-bundle-50: #edf8f3;
--color-sage-bundle-100: #dfebe6;
--color-sage-bundle-200: #c8d9d1;
--color-sage-bundle-300: #a9bdb4;
--color-sage-bundle-400: #8ea59a;
--color-sage-bundle-500: #738d81;
--color-sage-bundle-600: #62776d;
--color-sage-bundle-700: #4e6057;
--color-sage-bundle-800: #39463f;
--color-sage-bundle-900: #27302c;
--color-sage-bundle-950: #151d19;
}SCSS
$sage-bundle: #bad3c7;
$sage-bundle-rgb: 186, 211, 199;
$sage-bundle-light: mix(#fff, $sage-bundle, 20%);
$sage-bundle-dark: mix(#000, $sage-bundle, 20%);
.element {
color: $sage-bundle;
box-shadow: 0 0 0 2px rgba($sage-bundle, 0.35);
}