色名 · #6CA178
Growth
Growthは#6CA178：rgb(108 161 120)、hsl(134 22% 53%)、oklch(0.66 0.083 150.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Growth color name →
#6CA178
oklch(0.66 0.083 150.7)
カラー変換
- HEX
- #6ca178
- RGB
- rgb(108 161 120)
- HSL
- hsl(134 22% 53%)
- HWB
- hwb(134 42% 37%)
- OKLCH
- oklch(0.66 0.083 150.7)
- OKLab
- oklab(0.66 -0.072 0.041)
- CIE Lab
- lab(61.68 -24.94 15.61)
- LCH
- lch(61.68 29.42 148)
- CMYK
- cmyk(33% 0% 25% 37%)
ティント · シェード · トーン
ティント
- 7BAA85
- 89B392
- 98BD9F
- A6C6AC
- B5CFBA
- C4D9C7
- D2E2D5
- E1ECE3
- F0F5F1
シェード
- 5D8B67
- 4E7657
- 406248
- 324E39
- 253C2A
- 192A1D
- 0D1910
- 040905
- 000101
トーン
- 6F9E79
- 719B7A
- 73977B
- 76947C
- 78917C
- 7A8D7D
- 7B8A7E
- 7D877F
- 7F837F
カラーハーモニー
補色 +180°
- 6CA178
Growth
- B080AA
≈ Stage Mauve
類似色 -30° +30°
- 6CA178
Growth
- 8B9A60
≈ Reptilian Leader
- 52A395
≈ Golf Blazer
トライアド +120° +240°
- 6CA178
Growth
- 7F90C6
≈ Pansy Garden
- C07F73
≈ Kitchen Terra Cotta
スプリットコンプリメンタリー +150° +210°
- 6CA178
Growth
- 9B87BE
≈ Petrified Purple
- BD7D8F
≈ Polignac
テトラード +90° +180° +270°
- 6CA178
Growth
- 6299C0
≈ Kentucky
- B080AA
≈ Stage Mauve
- B8865D
≈ Doe
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.99:1 · APCA Lc 57
Ag
AAA黒の上
WCAG 7.00:1 · APCA Lc 45
最適な文字色: #000000
WCAG 7.00:1 (AAA) · APCA Lc 45
Contrast pairs
コードスニペット
CSS
:root {
--growth: #6ca178;
--growth-rgb: 108 161 120;
--growth-oklch: oklch(0.66 0.083 150.7);
}
.element {
color: var(--growth);
background-color: hsl(134 22% 53%);
border-color: oklch(0.66 0.083 150.7);
}Tailwind CSS v4
@theme {
--color-growth: #6ca178;
--color-growth-50: #e4fdea;
--color-growth-100: #d4f0db;
--color-growth-200: #badfc4;
--color-growth-300: #98c4a3;
--color-growth-400: #7aad85;
--color-growth-500: #5b9669;
--color-growth-600: #4e7f59;
--color-growth-700: #3e6547;
--color-growth-800: #2d4a32;
--color-growth-900: #1f3422;
--color-growth-950: #0e1f11;
}SCSS
$growth: #6ca178;
$growth-rgb: 108, 161, 120;
$growth-light: mix(#fff, $growth, 20%);
$growth-dark: mix(#000, $growth, 20%);
.element {
color: $growth;
box-shadow: 0 0 0 2px rgba($growth, 0.35);
}