Nazwany kolor · #1FA774
Cǎo Lǜ Grass
Cǎo Lǜ Grass to #1FA774: rgb(31 167 116), hsl(158 69% 39%), oklch(0.647 0.135 161.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Cǎo Lǜ Grass color name →
#1FA774
oklch(0.647 0.135 161.7)
Konwersje koloru
- HEX
- #1fa774
- RGB
- rgb(31 167 116)
- HSL
- hsl(158 69% 39%)
- HWB
- hwb(158 12% 35%)
- OKLCH
- oklch(0.647 0.135 161.7)
- OKLab
- oklab(0.647 -0.128 0.042)
- CIE Lab
- lab(60.84 -45.56 16.14)
- LCH
- lch(60.84 48.34 160.5)
- CMYK
- cmyk(81% 0% 31% 35%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 44B081
- 5EB98F
- 75C29C
- 8ACBAA
- 9ED3B8
- B2DCC6
- C5E5D4
- D9EEE2
- ECF6F0
Odcienie ciemniejsze
- 199164
- 147B54
- 0F6645
- 0A5237
- 063E29
- 032C1B
- 011A0F
- 000A05
- 000101
Tony
- 35A375
- 44A077
- 4F9C78
- 599879
- 61947B
- 69907C
- 6F8C7D
- 75887E
- 7B847F
Harmonie kolorów
Komplementarna +180°
- 1FA774
Cǎo Lǜ Grass
- C56AA6
≈ Sugar Creek
Analogowa -30° +30°
- 1FA774
Cǎo Lǜ Grass
- 6F9F41
≈ Indubitably Green
- 00A39F
≈ Silken Jade
Triada +120° +240°
- 1FA774
Cǎo Lǜ Grass
- 8282DE
≈ Indigo Bloom
- D16F48
≈ Coral Gold
Komplementarna rozszczepiona +150° +210°
- 1FA774
Cǎo Lǜ Grass
- A974CA
≈ Rich Lavender
- D26879
≈ Pinkish
Tetrada +90° +180° +270°
- 1FA774
Cǎo Lǜ Grass
- 4A92DD
≈ Oregon Blue
- C56AA6
≈ Sugar Creek
- C07E10
≈ Guo Tie Dumpling
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.07:1 · APCA Lc 57
Ag
AANa czerni
WCAG 6.83:1 · APCA Lc 45
Najlepszy kolor tekstu: #000000
WCAG 6.83:1 (AA) · APCA Lc 45
Contrast pairs
Fragmenty kodu
CSS
:root {
--cao-lu-grass: #1fa774;
--cao-lu-grass-rgb: 31 167 116;
--cao-lu-grass-oklch: oklch(0.647 0.135 161.7);
}
.element {
color: var(--cao-lu-grass);
background-color: hsl(158 69% 39%);
border-color: oklch(0.647 0.135 161.7);
}Tailwind CSS v4
@theme {
--color-cao-lu-grass: #1fa774;
--color-cao-lu-grass-50: #d3ffeb;
--color-cao-lu-grass-100: #bff7dc;
--color-cao-lu-grass-200: #9de7c5;
--color-cao-lu-grass-300: #70cda4;
--color-cao-lu-grass-400: #42b785;
--color-cao-lu-grass-500: #00a169;
--color-cao-lu-grass-600: #008859;
--color-cao-lu-grass-700: #006d47;
--color-cao-lu-grass-800: #005031;
--color-cao-lu-grass-900: #013821;
--color-cao-lu-grass-950: #002211;
}SCSS
$cao-lu-grass: #1fa774;
$cao-lu-grass-rgb: 31, 167, 116;
$cao-lu-grass-light: mix(#fff, $cao-lu-grass, 20%);
$cao-lu-grass-dark: mix(#000, $cao-lu-grass, 20%);
.element {
color: $cao-lu-grass;
box-shadow: 0 0 0 2px rgba($cao-lu-grass, 0.35);
}