色名 · #77DD77
Pastel Green
Pastel Greenは#77DD77：rgb(119 221 119)、hsl(120 60% 67%)、oklch(0.812 0.169 143.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Pastel Green color name →
#77DD77
oklch(0.812 0.169 143.8)
カラー変換
- HEX
- #77dd77
- RGB
- rgb(119 221 119)
- HSL
- hsl(120 60% 67%)
- HWB
- hwb(120 47% 13%)
- OKLCH
- oklch(0.812 0.169 143.8)
- OKLab
- oklab(0.812 -0.136 0.1)
- CIE Lab
- lab(80.21 -46.43 40.25)
- LCH
- lch(80.21 61.45 139.1)
- CMYK
- cmyk(46% 0% 46% 13%)
ティント · シェード · トーン
ティント
- 87E186
- 95E594
- A4E8A2
- B1ECAF
- BFEFBD
- CCF3CA
- D9F6D7
- E6F9E5
- F2FCF2
シェード
- 67C067
- 57A457
- 478847
- 386E38
- 2A552A
- 1C3D1C
- 102610
- 051105
- 010201
トーン
- 7AD479
- 7CCA7B
- 7EC17C
- 7FB87E
- 80AE7F
- 81A57F
- 819C80
- 819380
- 818980
カラーハーモニー
補色 +180°
- 77DD77
Pastel Green
- F699FF
≈ Party Pig
類似色 -30° +30°
- 77DD77
Pastel Green
- C1CD30
≈ Greedy Gold
- 00E1BA
≈ Celestial Green
トライアド +120° +240°
- 77DD77
Pastel Green
- A3C1FF
≈ Pastel Blue
- FFA6A0
≈ Pink Dream
スプリットコンプリメンタリー +150° +210°
- 77DD77
Pastel Green
- C5B5FF
≈ Violet Heaven
- FFA0C7
≈ Bazooka Pink
テトラード +90° +180° +270°
- 77DD77
Pastel Green
- 71CEFF
≈ Bubbly Barracuda
- F699FF
≈ Party Pig
- FFAB73
≈ Larch Bolete
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.69:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.39:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.39:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--pastel-green: #77dd77;
--pastel-green-rgb: 119 221 119;
--pastel-green-oklch: oklch(0.812 0.169 143.8);
}
.element {
color: var(--pastel-green);
background-color: hsl(120 60% 67%);
border-color: oklch(0.812 0.169 143.8);
}Tailwind CSS v4
@theme {
--color-pastel-green: #77dd77;
--color-pastel-green-50: #d7ffd9;
--color-pastel-green-100: #c4f8c6;
--color-pastel-green-200: #a5e8a9;
--color-pastel-green-300: #7bce81;
--color-pastel-green-400: #58b759;
--color-pastel-green-500: #24a12e;
--color-pastel-green-600: #228829;
--color-pastel-green-700: #1c6d21;
--color-pastel-green-800: #175012;
--color-pastel-green-900: #0f380b;
--color-pastel-green-950: #022201;
}SCSS
$pastel-green: #77dd77;
$pastel-green-rgb: 119, 221, 119;
$pastel-green-light: mix(#fff, $pastel-green, 20%);
$pastel-green-dark: mix(#000, $pastel-green, 20%);
.element {
color: $pastel-green;
box-shadow: 0 0 0 2px rgba($pastel-green, 0.35);
}