色名 · #7D7853
Green Woodpecker Olive
Green Woodpecker Oliveは#7D7853：rgb(125 120 83)、hsl(53 20% 41%)、oklch(0.567 0.054 101.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Green Woodpecker Olive color name →
#7D7853
oklch(0.567 0.054 101.4)
カラー変換
- HEX
- #7d7853
- RGB
- rgb(125 120 83)
- HSL
- hsl(53 20% 41%)
- HWB
- hwb(53 33% 51%)
- OKLCH
- oklch(0.567 0.054 101.4)
- OKLab
- oklab(0.567 -0.011 0.052)
- CIE Lab
- lab(50.16 -2.55 21.1)
- LCH
- lch(50.16 21.26 96.9)
- CMYK
- cmyk(0% 4% 34% 51%)
ティント · シェード · トーン
ティント
- 898563
- 969274
- A29F84
- AFAC95
- BCB9A6
- C9C7B7
- D6D5C9
- E4E3DB
- F1F1ED
シェード
- 6C6747
- 5B573B
- 4B4830
- 3B3925
- 2C2A1B
- 1E1D11
- 111008
- 050502
- 010100
トーン
- 7D7958
- 7E7A5D
- 7E7B61
- 7E7B66
- 7E7C6A
- 7F7D6F
- 7F7E73
- 7F7F77
- 807F7C
カラーハーモニー
補色 +180°
- 7D7853
Green Woodpecker Olive
- 717396
≈ Silk Crepe Mauve
類似色 -30° +30°
- 7D7853
Green Woodpecker Olive
- 8B7254
≈ China Cinnamon
- 6B7E5D
≈ Emerald City
トライアド +120° +240°
- 7D7853
Green Woodpecker Olive
- 527E8D
≈ Technical Blue
- 8D6A80
≈ Milkwort Red
スプリットコンプリメンタリー +150° +210°
- 7D7853
Green Woodpecker Olive
- 5F7996
≈ Cropper Blue
- 816E8E
≈ Grey Purple
テトラード +90° +180° +270°
- 7D7853
Green Woodpecker Olive
- 50817E
≈ Nickel Ore Green
- 717396
≈ Silk Crepe Mauve
- 936A6F
≈ San Francisco Mauve
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.48:1 · APCA Lc 71
Ag
AA黒の上
WCAG 4.68:1 · APCA Lc 31
最適な文字色: #000000
WCAG 4.68:1 (AA) · APCA Lc 31
Contrast pairs
コードスニペット
CSS
:root {
--green-woodpecker-olive: #7d7853;
--green-woodpecker-olive-rgb: 125 120 83;
--green-woodpecker-olive-oklch: oklch(0.567 0.054 101.4);
}
.element {
color: var(--green-woodpecker-olive);
background-color: hsl(53 20% 41%);
border-color: oklch(0.567 0.054 101.4);
}Tailwind CSS v4
@theme {
--color-green-woodpecker-olive: #7d7853;
--color-green-woodpecker-olive-50: #f7f6e5;
--color-green-woodpecker-olive-100: #ebe9d5;
--color-green-woodpecker-olive-200: #d8d6bc;
--color-green-woodpecker-olive-300: #bcb99a;
--color-green-woodpecker-olive-400: #a5a07c;
--color-green-woodpecker-olive-500: #8d885e;
--color-green-woodpecker-olive-600: #787350;
--color-green-woodpecker-olive-700: #605c40;
--color-green-woodpecker-olive-800: #47432d;
--color-green-woodpecker-olive-900: #312e1f;
--color-green-woodpecker-olive-950: #1d1b0e;
}SCSS
$green-woodpecker-olive: #7d7853;
$green-woodpecker-olive-rgb: 125, 120, 83;
$green-woodpecker-olive-light: mix(#fff, $green-woodpecker-olive, 20%);
$green-woodpecker-olive-dark: mix(#000, $green-woodpecker-olive, 20%);
.element {
color: $green-woodpecker-olive;
box-shadow: 0 0 0 2px rgba($green-woodpecker-olive, 0.35);
}