色名 · #84C299
Willow Hedge
Willow Hedgeは#84C299：rgb(132 194 153)、hsl(140 34% 64%)、oklch(0.761 0.087 154.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Willow Hedge color name →
#84C299
oklch(0.761 0.087 154.9)
カラー変換
- HEX
- #84c299
- RGB
- rgb(132 194 153)
- HSL
- hsl(140 34% 64%)
- HWB
- hwb(140 52% 24%)
- OKLCH
- oklch(0.761 0.087 154.9)
- OKLab
- oklab(0.761 -0.079 0.037)
- CIE Lab
- lab(73.38 -27.24 14.09)
- LCH
- lch(73.38 30.66 152.6)
- CMYK
- cmyk(32% 0% 21% 24%)
ティント · シェード · トーン
ティント
- 91C8A3
- 9DCEAD
- AAD4B7
- B6DAC1
- C2E1CB
- CEE7D5
- DAEDE0
- E7F3EA
- F3F9F5
シェード
- 72A884
- 608F70
- 4F775D
- 3F604A
- 2F4938
- 203427
- 122017
- 060E08
- 010201
トーン
- 84BB97
- 84B594
- 84AE92
- 84A78F
- 84A18D
- 839A8A
- 839488
- 828D85
- 818783
カラーハーモニー
補色 +180°
- 84C299
Willow Hedge
- D49DC7
≈ Girl Power
類似色 -30° +30°
- 84C299
Willow Hedge
- A5BB7E
≈ Margarita
- 6CC4B8
≈ Pale Jade
トライアド +120° +240°
- 84C299
Willow Hedge
- A1ADE9
≈ Maximum Blue Purple
- E39E8C
≈ Pink Palazzo
スプリットコンプリメンタリー +150° +210°
- 84C299
Willow Hedge
- BEA4DE
≈ Enchanted Lavender
- E19AAA
≈ Colorado Dawn
テトラード +90° +180° +270°
- 84C299
Willow Hedge
- 82B8E5
≈ Aero
- D49DC7
≈ Girl Power
- D8A676
≈ Fresh Nectar
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.06:1 · APCA Lc 40
Ag
AAA黒の上
WCAG 10.15:1 · APCA Lc 62
最適な文字色: #000000
WCAG 10.15:1 (AAA) · APCA Lc 62
Contrast pairs
コードスニペット
CSS
:root {
--willow-hedge: #84c299;
--willow-hedge-rgb: 132 194 153;
--willow-hedge-oklch: oklch(0.761 0.087 154.9);
}
.element {
color: var(--willow-hedge);
background-color: hsl(140 34% 64%);
border-color: oklch(0.761 0.087 154.9);
}Tailwind CSS v4
@theme {
--color-willow-hedge: #84c299;
--color-willow-hedge-50: #e2fdeb;
--color-willow-hedge-100: #d1f1dc;
--color-willow-hedge-200: #b7e0c5;
--color-willow-hedge-300: #93c5a6;
--color-willow-hedge-400: #74ae88;
--color-willow-hedge-500: #53976c;
--color-willow-hedge-600: #47805c;
--color-willow-hedge-700: #396649;
--color-willow-hedge-800: #294b34;
--color-willow-hedge-900: #1c3423;
--color-willow-hedge-950: #0c2012;
}SCSS
$willow-hedge: #84c299;
$willow-hedge-rgb: 132, 194, 153;
$willow-hedge-light: mix(#fff, $willow-hedge, 20%);
$willow-hedge-dark: mix(#000, $willow-hedge, 20%);
.element {
color: $willow-hedge;
box-shadow: 0 0 0 2px rgba($willow-hedge, 0.35);
}