이름 색상 · #B2A18C
Stepping Stones
Stepping Stones은(는) #B2A18C: rgb(178 161 140), hsl(33 20% 62%), oklch(0.718 0.036 73). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Stepping Stones color name →
#B2A18C
oklch(0.718 0.036 73)
색상 변환
- HEX
- #b2a18c
- RGB
- rgb(178 161 140)
- HSL
- hsl(33 20% 62%)
- HWB
- hwb(33 55% 30%)
- OKLCH
- oklch(0.718 0.036 73)
- OKLab
- oklab(0.718 0.01 0.034)
- CIE Lab
- lab(67.31 3.88 13.36)
- LCH
- lch(67.31 13.91 73.8)
- CMYK
- cmyk(0% 10% 21% 30%)
틴트 · 셰이드 · 톤
틴트
- BAAA97
- C1B3A2
- C9BCAD
- D0C6B9
- D8CFC4
- E0D9D0
- E7E2DB
- EFECE7
- F7F5F3
셰이드
- 9A8B79
- 837667
- 6D6255
- 574E43
- 433C33
- 2F2A23
- 1D1914
- 0C0907
- 010101
톤
- AD9E8B
- A89A8A
- A39789
- 9E9487
- 999086
- 948D85
- 8F8A84
- 8A8783
- 858381
색 조화
보색 +180°
- B2A18C
Stepping Stones
- 95A6BA
≈ Moon Shadow
유사색 -30° +30°
- B2A18C
Stepping Stones
- B89D93
≈ Big Horn Mountains
- A8A58C
≈ Herbes
삼각 배색 +120° +240°
- B2A18C
Stepping Stones
- 8BABAA
≈ Hydrology
- AC9EB4
≈ Grapeade
분열 보색 +150° +210°
- B2A18C
Stepping Stones
- 8DA9B4
≈ Pewter Blue
- A0A2BA
≈ Blue Buzz
사각 배색 +90° +180° +270°
- B2A18C
Stepping Stones
- 91AB9E
≈ Rare Happening
- 95A6BA
≈ Moon Shadow
- B59CAA
≈ Play Time
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.50:1 · APCA Lc 49
Ag
AAA검은색 위
WCAG 8.36:1 · APCA Lc 53
가장 좋은 글자색: #000000
WCAG 8.36:1 (AAA) · APCA Lc 53
Contrast pairs
코드 스니펫
CSS
:root {
--stepping-stones: #b2a18c;
--stepping-stones-rgb: 178 161 140;
--stepping-stones-oklch: oklch(0.718 0.036 73);
}
.element {
color: var(--stepping-stones);
background-color: hsl(33 20% 62%);
border-color: oklch(0.718 0.036 73);
}Tailwind CSS v4
@theme {
--color-stepping-stones: #b2a18c;
--color-stepping-stones-50: #fbf4ea;
--color-stepping-stones-100: #efe6db;
--color-stepping-stones-200: #ddd2c4;
--color-stepping-stones-300: #c2b5a4;
--color-stepping-stones-400: #ac9c88;
--color-stepping-stones-500: #95836c;
--color-stepping-stones-600: #7e6f5c;
--color-stepping-stones-700: #655949;
--color-stepping-stones-800: #4a4035;
--color-stepping-stones-900: #342c24;
--color-stepping-stones-950: #1f1913;
}SCSS
$stepping-stones: #b2a18c;
$stepping-stones-rgb: 178, 161, 140;
$stepping-stones-light: mix(#fff, $stepping-stones, 20%);
$stepping-stones-dark: mix(#000, $stepping-stones, 20%);
.element {
color: $stepping-stones;
box-shadow: 0 0 0 2px rgba($stepping-stones, 0.35);
}