이름 색상 · #97B2B7
Mohair Soft Blue Grey
Mohair Soft Blue Grey은(는) #97B2B7: rgb(151 178 183), hsl(189 18% 65%), oklch(0.745 0.031 210.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Mohair Soft Blue Grey color name →
#97B2B7
oklch(0.745 0.031 210.1)
색상 변환
- HEX
- #97b2b7
- RGB
- rgb(151 178 183)
- HSL
- hsl(189 18% 65%)
- HWB
- hwb(189 59% 28%)
- OKLCH
- oklch(0.745 0.031 210.1)
- OKLab
- oklab(0.745 -0.026 -0.015)
- CIE Lab
- lab(70.64 -8.78 -5.83)
- LCH
- lch(70.64 10.54 213.6)
- CMYK
- cmyk(17% 3% 0% 28%)
틴트 · 셰이드 · 톤
틴트
- A1B9BE
- ABC1C5
- B6C9CC
- C0D0D3
- CAD8DA
- D5E0E2
- DFE7E9
- EAEFF0
- F4F7F8
셰이드
- 839A9F
- 6F8387
- 5C6D70
- 49575A
- 374345
- 262F31
- 171D1E
- 080C0C
- 010102
톤
- 95ADB1
- 93A8AC
- 90A3A6
- 8E9EA1
- 8C999B
- 899496
- 878F90
- 858A8B
- 828585
색 조화
보색 +180°
- 97B2B7
Mohair Soft Blue Grey
- BFA6A1
≈ Mohair Mauve
유사색 -30° +30°
- 97B2B7
Mohair Soft Blue Grey
- 98B3AD
≈ Tiamo
- 9CAFBE
≈ Lost in Time
삼각 배색 +120° +240°
- 97B2B7
Mohair Soft Blue Grey
- B8A6B6
≈ Buckwheat Mauve
- B4AC97
≈ Svelte Sage
분열 보색 +150° +210°
- 97B2B7
Mohair Soft Blue Grey
- BEA5AB
≈ Cold Pink
- BBA899
≈ Ginger Grey Yellow
사각 배색 +90° +180° +270°
- 97B2B7
Mohair Soft Blue Grey
- AFA8BD
≈ Morning Mist Grey
- BFA6A1
≈ Mohair Mauve
- A9AF9A
≈ Ending Spring
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.24:1 · APCA Lc 44
Ag
AAA검은색 위
WCAG 9.36:1 · APCA Lc 58
가장 좋은 글자색: #000000
WCAG 9.36:1 (AAA) · APCA Lc 58
Contrast pairs
코드 스니펫
CSS
:root {
--mohair-soft-blue-grey: #97b2b7;
--mohair-soft-blue-grey-rgb: 151 178 183;
--mohair-soft-blue-grey-oklch: oklch(0.745 0.031 210.1);
}
.element {
color: var(--mohair-soft-blue-grey);
background-color: hsl(189 18% 65%);
border-color: oklch(0.745 0.031 210.1);
}Tailwind CSS v4
@theme {
--color-mohair-soft-blue-grey: #97b2b7;
--color-mohair-soft-blue-grey-50: #ecf8fa;
--color-mohair-soft-blue-grey-100: #ddebee;
--color-mohair-soft-blue-grey-200: #c6d8dc;
--color-mohair-soft-blue-grey-300: #a6bcc0;
--color-mohair-soft-blue-grey-400: #8aa4a8;
--color-mohair-soft-blue-grey-500: #6f8c91;
--color-mohair-soft-blue-grey-600: #5e777b;
--color-mohair-soft-blue-grey-700: #4b5f62;
--color-mohair-soft-blue-grey-800: #364548;
--color-mohair-soft-blue-grey-900: #253032;
--color-mohair-soft-blue-grey-950: #141c1e;
}SCSS
$mohair-soft-blue-grey: #97b2b7;
$mohair-soft-blue-grey-rgb: 151, 178, 183;
$mohair-soft-blue-grey-light: mix(#fff, $mohair-soft-blue-grey, 20%);
$mohair-soft-blue-grey-dark: mix(#000, $mohair-soft-blue-grey, 20%);
.element {
color: $mohair-soft-blue-grey;
box-shadow: 0 0 0 2px rgba($mohair-soft-blue-grey, 0.35);
}