色名 · #22BB22
Lush Plains
Lush Plainsは#22BB22：rgb(34 187 34)、hsl(120 69% 43%)、oklch(0.69 0.221 142.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Lush Plains color name →
#22BB22
oklch(0.69 0.221 142.7)
カラー変換
- HEX
- #22bb22
- RGB
- rgb(34 187 34)
- HSL
- hsl(120 69% 43%)
- HWB
- hwb(120 13% 27%)
- OKLCH
- oklch(0.69 0.221 142.7)
- OKLab
- oklab(0.69 -0.176 0.134)
- CIE Lab
- lab(66.58 -59.65 58.95)
- LCH
- lch(66.58 83.87 135.3)
- CMYK
- cmyk(82% 0% 82% 27%)
ティント · シェード · トーン
ティント
- 48C344
- 62CA5D
- 79D173
- 8ED888
- A1DF9C
- B5E6B0
- C8ECC4
- DAF3D8
- EDF9EB
シェード
- 1CA21C
- 168A16
- 117311
- 0B5C0B
- 074607
- 033203
- 011F01
- 000D00
- 000200
トーン
- 38B535
- 47B043
- 52AA4E
- 5CA557
- 649F60
- 6B9967
- 71936E
- 778D74
- 7B867A
カラーハーモニー
補色 +180°
- 22BB22
Lush Plains
- D960E9
≈ Clematis Magenta
類似色 -30° +30°
- 22BB22
Lush Plains
- 9DA400
≈ Fistfull of Green
- 00B593
≈ Aloha
トライアド +120° +240°
- 22BB22
Lush Plains
- 6498FF
≈ Blue Chaos
- FF5B5F
≈ Fusion Red
スプリットコンプリメンタリー +150° +210°
- 22BB22
Lush Plains
- A181FF
≈ Purple Illusionist
- FB4FA8
≈ Barbie Pink
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.56:1 · APCA Lc 49
Ag
AAA黒の上
WCAG 8.19:1 · APCA Lc 52
最適な文字色: #000000
WCAG 8.19:1 (AAA) · APCA Lc 52
Contrast pairs
コードスニペット
CSS
:root {
--lush-plains: #22bb22;
--lush-plains-rgb: 34 187 34;
--lush-plains-oklch: oklch(0.69 0.221 142.7);
}
.element {
color: var(--lush-plains);
background-color: hsl(120 69% 43%);
border-color: oklch(0.69 0.221 142.7);
}Tailwind CSS v4
@theme {
--color-lush-plains: #22bb22;
--color-lush-plains-50: #ceffce;
--color-lush-plains-100: #bafcba;
--color-lush-plains-200: #96ed98;
--color-lush-plains-300: #64d46b;
--color-lush-plains-400: #35bd33;
--color-lush-plains-500: #00a700;
--color-lush-plains-600: #008d00;
--color-lush-plains-700: #007100;
--color-lush-plains-800: #005300;
--color-lush-plains-900: #003a00;
--color-lush-plains-950: #002400;
}SCSS
$lush-plains: #22bb22;
$lush-plains-rgb: 34, 187, 34;
$lush-plains-light: mix(#fff, $lush-plains, 20%);
$lush-plains-dark: mix(#000, $lush-plains, 20%);
.element {
color: $lush-plains;
box-shadow: 0 0 0 2px rgba($lush-plains, 0.35);
}