이름 색상 · #AF9D83
Tatami Mat
Tatami Mat은(는) #AF9D83: rgb(175 157 131), hsl(35 22% 60%), oklch(0.705 0.042 77). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Tatami Mat color name →
#AF9D83
oklch(0.705 0.042 77)
색상 변환
- HEX
- #af9d83
- RGB
- rgb(175 157 131)
- HSL
- hsl(35 22% 60%)
- HWB
- hwb(35 51% 31%)
- OKLCH
- oklch(0.705 0.042 77)
- OKLab
- oklab(0.705 0.009 0.041)
- CIE Lab
- lab(65.81 3.76 16.2)
- LCH
- lch(65.81 16.63 76.9)
- CMYK
- cmyk(0% 10% 25% 31%)
틴트 · 셰이드 · 톤
틴트
- B7A68F
- BFB09B
- C7BAA7
- CEC3B3
- D6CDC0
- DED7CC
- E7E1D9
- EFEBE5
- F7F5F2
셰이드
- 988871
- 817360
- 6B5F4F
- 564C3F
- 413A2F
- 2E2820
- 1C1812
- 0B0906
- 010101
톤
- AA9A83
- A59783
- A19482
- 9C9182
- 978E82
- 938C82
- 8E8981
- 898681
- 858380
색 조화
보색 +180°
- AF9D83
Tatami Mat
- 90A1BB
≈ Faded Lilac
유사색 -30° +30°
- AF9D83
Tatami Mat
- B7988A
≈ Del Rio
- A2A284
≈ Rigby Ridge
삼각 배색 +120° +240°
- AF9D83
Tatami Mat
- 82A8A9
≈ Acapulco Aqua
- AB98B2
≈ Lilac Lustre
분열 보색 +150° +210°
- AF9D83
Tatami Mat
- 85A6B5
≈ Grauzone
- 9E9CB9
≈ Logan
사각 배색 +90° +180° +270°
- AF9D83
Tatami Mat
- 87A99A
≈ Pale Willow
- 90A1BB
≈ Faded Lilac
- B596A5
≈ Ashberry
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.63:1 · APCA Lc 51
Ag
AAA검은색 위
WCAG 7.97:1 · APCA Lc 51
가장 좋은 글자색: #000000
WCAG 7.97:1 (AAA) · APCA Lc 51
Contrast pairs
코드 스니펫
CSS
:root {
--tatami-mat: #af9d83;
--tatami-mat-rgb: 175 157 131;
--tatami-mat-oklch: oklch(0.705 0.042 77);
}
.element {
color: var(--tatami-mat);
background-color: hsl(35 22% 60%);
border-color: oklch(0.705 0.042 77);
}Tailwind CSS v4
@theme {
--color-tatami-mat: #af9d83;
--color-tatami-mat-50: #fcf4e8;
--color-tatami-mat-100: #f0e7d9;
--color-tatami-mat-200: #ded3c1;
--color-tatami-mat-300: #c3b5a0;
--color-tatami-mat-400: #ad9c83;
--color-tatami-mat-500: #968367;
--color-tatami-mat-600: #7f6f57;
--color-tatami-mat-700: #665946;
--color-tatami-mat-800: #4b4032;
--color-tatami-mat-900: #342c22;
--color-tatami-mat-950: #201911;
}SCSS
$tatami-mat: #af9d83;
$tatami-mat-rgb: 175, 157, 131;
$tatami-mat-light: mix(#fff, $tatami-mat, 20%);
$tatami-mat-dark: mix(#000, $tatami-mat, 20%);
.element {
color: $tatami-mat;
box-shadow: 0 0 0 2px rgba($tatami-mat, 0.35);
}