色名 · #22AA00
Vegetarian
Vegetarianは#22AA00：rgb(34 170 0)、hsl(108 100% 33%)、oklch(0.643 0.213 141.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Vegetarian color name →
#22AA00
oklch(0.643 0.213 141.3)
カラー変換
- HEX
- #22aa00
- RGB
- rgb(34 170 0)
- HSL
- hsl(108 100% 33%)
- HWB
- hwb(108 0% 33%)
- OKLCH
- oklch(0.643 0.213 141.3)
- OKLab
- oklab(0.643 -0.166 0.133)
- CIE Lab
- lab(60.93 -55.84 60.18)
- LCH
- lch(60.93 82.09 132.9)
- CMYK
- cmyk(80% 0% 100% 33%)
ティント · シェード · トーン
ティント
- 45B335
- 5EBC51
- 75C569
- 8ACE80
- 9ED695
- B1DFAB
- C5E7C0
- D8EFD5
- ECF7EA
シェード
- 1C9300
- 167D00
- 116800
- 0B5300
- 073F00
- 032D00
- 011B00
- 000B00
- 000100
トーン
- 36A625
- 44A237
- 4F9F44
- 599B4F
- 619759
- 689262
- 6F8E6A
- 758A72
- 7B8579
カラーハーモニー
補色 +180°
- 22AA00
Vegetarian
- C555D9
≈ Thick Pink
類似色 -30° +30°
- 22AA00
Vegetarian
- 919400
≈ Turtle Moss
- 00A583
≈ Congo Green
トライアド +120° +240°
- 22AA00
Vegetarian
- 4687FF
≈ Bleuchâtel Blue
- F34150
≈ Vineyard Autumn
スプリットコンプリメンタリー +150° +210°
- 22AA00
Vegetarian
- 926CFF
≈ Purple Anemone
- E5449C
≈ Schiaparelli Pink
テトラード +90° +180° +270°
- 22AA00
Vegetarian
- 009ACD
≈ Tomb Blue
- C555D9
≈ Thick Pink
- D96900
≈ Apple II Chocolate
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.08:1 · APCA Lc 57
Ag
AA黒の上
WCAG 6.81:1 · APCA Lc 45
最適な文字色: #000000
WCAG 6.81:1 (AA) · APCA Lc 45
Contrast pairs
コードスニペット
CSS
:root {
--vegetarian: #22aa00;
--vegetarian-rgb: 34 170 0;
--vegetarian-oklch: oklch(0.643 0.213 141.3);
}
.element {
color: var(--vegetarian);
background-color: hsl(108 100% 33%);
border-color: oklch(0.643 0.213 141.3);
}Tailwind CSS v4
@theme {
--color-vegetarian: #22aa00;
--color-vegetarian-50: #d2ffce;
--color-vegetarian-100: #befbba;
--color-vegetarian-200: #9bec98;
--color-vegetarian-300: #6dd26b;
--color-vegetarian-400: #45bb34;
--color-vegetarian-500: #00a500;
--color-vegetarian-600: #008b00;
--color-vegetarian-700: #007000;
--color-vegetarian-800: #085200;
--color-vegetarian-900: #063900;
--color-vegetarian-950: #002300;
}SCSS
$vegetarian: #22aa00;
$vegetarian-rgb: 34, 170, 0;
$vegetarian-light: mix(#fff, $vegetarian, 20%);
$vegetarian-dark: mix(#000, $vegetarian, 20%);
.element {
color: $vegetarian;
box-shadow: 0 0 0 2px rgba($vegetarian, 0.35);
}