色名 · #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);
}