이름 색상 · #31AA74
Beanstalk
Beanstalk은(는) #31AA74: rgb(49 170 116), hsl(153 55% 43%), oklch(0.658 0.133 159.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Green mean? → · Beanstalk color name →
#31AA74
oklch(0.658 0.133 159.4)
색상 변환
- HEX
- #31aa74
- RGB
- rgb(49 170 116)
- HSL
- hsl(153 55% 43%)
- HWB
- hwb(153 19% 33%)
- OKLCH
- oklch(0.658 0.133 159.4)
- OKLab
- oklab(0.658 -0.125 0.047)
- CIE Lab
- lab(62.13 -44.21 17.95)
- LCH
- lch(62.13 47.72 157.9)
- CMYK
- cmyk(71% 0% 32% 33%)
틴트 · 셰이드 · 톤
틴트
- 4EB381
- 66BB8F
- 7BC49C
- 8FCCAA
- A2D5B8
- B5DDC6
- C8E6D4
- DAEEE2
- EDF7F1
셰이드
- 299364
- 227D54
- 1A6845
- 135337
- 0C3F29
- 062D1B
- 031B0F
- 010B05
- 000101
톤
- 40A675
- 4CA277
- 569E78
- 5E9A79
- 65967B
- 6B917C
- 718D7D
- 77897E
- 7B847F
색 조화
보색 +180°
- 31AA74
Beanstalk
- C66FAC
≈ Sugar Creek
유사색 -30° +30°
- 31AA74
Beanstalk
- 77A142
≈ Indubitably Green
- 00A8A0
≈ Jadestone
삼각 배색 +120° +240°
- 31AA74
Beanstalk
- 8287E1
≈ Indigo Bloom
- D57250
≈ Coral Gold
분열 보색 +150° +210°
- 31AA74
Beanstalk
- AA79CF
≈ Wisteria
- D56C80
≈ Pinkish
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.94:1 · APCA Lc 56
Ag
AAA검은색 위
WCAG 7.13:1 · APCA Lc 46
가장 좋은 글자색: #000000
WCAG 7.13:1 (AAA) · APCA Lc 46
Contrast pairs
코드 스니펫
CSS
:root {
--beanstalk: #31aa74;
--beanstalk-rgb: 49 170 116;
--beanstalk-oklch: oklch(0.658 0.133 159.4);
}
.element {
color: var(--beanstalk);
background-color: hsl(153 55% 43%);
border-color: oklch(0.658 0.133 159.4);
}Tailwind CSS v4
@theme {
--color-beanstalk: #31aa74;
--color-beanstalk-50: #d4ffe9;
--color-beanstalk-100: #c1f6da;
--color-beanstalk-200: #a0e7c2;
--color-beanstalk-300: #74cda2;
--color-beanstalk-400: #4ab682;
--color-beanstalk-500: #00a066;
--color-beanstalk-600: #008756;
--color-beanstalk-700: #026c45;
--color-beanstalk-800: #06502f;
--color-beanstalk-900: #053720;
--color-beanstalk-950: #002210;
}SCSS
$beanstalk: #31aa74;
$beanstalk-rgb: 49, 170, 116;
$beanstalk-light: mix(#fff, $beanstalk, 20%);
$beanstalk-dark: mix(#000, $beanstalk, 20%);
.element {
color: $beanstalk;
box-shadow: 0 0 0 2px rgba($beanstalk, 0.35);
}