色名 · #7FBB9E
Neptune Green
Neptune Greenは#7FBB9E：rgb(127 187 158)、hsl(151 31% 62%)、oklch(0.743 0.075 162.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Neptune Green color name →
#7FBB9E
oklch(0.743 0.075 162.9)
カラー変換
- HEX
- #7fbb9e
- RGB
- rgb(127 187 158)
- HSL
- hsl(151 31% 62%)
- HWB
- hwb(151 50% 27%)
- OKLCH
- oklch(0.743 0.075 162.9)
- OKLab
- oklab(0.743 -0.072 0.022)
- CIE Lab
- lab(71.16 -24.94 8.27)
- LCH
- lch(71.16 26.28 161.7)
- CMYK
- cmyk(32% 0% 16% 27%)
ティント · シェード · トーン
ティント
- 8CC2A7
- 99C9B1
- A6CFBA
- B3D6C4
- BFDDCE
- CCE4D7
- D9EBE1
- E6F1EB
- F2F8F5
シェード
- 6EA289
- 5D8A74
- 4C7360
- 3C5C4D
- 2D463A
- 1F3229
- 111F18
- 060D09
- 010201
トーン
- 80B59B
- 80AF98
- 81A995
- 81A392
- 819D8F
- 81978C
- 819289
- 818C86
- 818683
カラーハーモニー
補色 +180°
- 7FBB9E
Neptune Green
- CE99B8
≈ Peach Buff
類似色 -30° +30°
- 7FBB9E
Neptune Green
- 99B685
≈ Mesclun Green
- 70BBB9
≈ Earth Eclipse
トライアド +120° +240°
- 7FBB9E
Neptune Green
- A4A6DA
≈ Sorbet Ice Mauve
- D59D86
≈ Dusty Coral
スプリットコンプリメンタリー +150° +210°
- 7FBB9E
Neptune Green
- BC9ECE
≈ Turnip Crown
- D7989E
≈ Parrot Pink
テトラード +90° +180° +270°
- 7FBB9E
Neptune Green
- 8AAFDB
≈ Birdie Num Num
- CE99B8
≈ Peach Buff
- C9A576
≈ Outback
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.20:1 · APCA Lc 43
Ag
AAA黒の上
WCAG 9.50:1 · APCA Lc 59
最適な文字色: #000000
WCAG 9.50:1 (AAA) · APCA Lc 59
Contrast pairs
コードスニペット
CSS
:root {
--neptune-green: #7fbb9e;
--neptune-green-rgb: 127 187 158;
--neptune-green-oklch: oklch(0.743 0.075 162.9);
}
.element {
color: var(--neptune-green);
background-color: hsl(151 31% 62%);
border-color: oklch(0.743 0.075 162.9);
}Tailwind CSS v4
@theme {
--color-neptune-green: #7fbb9e;
--color-neptune-green-50: #e2fcf0;
--color-neptune-green-100: #d2f0e2;
--color-neptune-green-200: #b7dfcc;
--color-neptune-green-300: #94c4ae;
--color-neptune-green-400: #75ad92;
--color-neptune-green-500: #549678;
--color-neptune-green-600: #487f65;
--color-neptune-green-700: #396651;
--color-neptune-green-800: #294b3a;
--color-neptune-green-900: #1c3428;
--color-neptune-green-950: #0c1f16;
}SCSS
$neptune-green: #7fbb9e;
$neptune-green-rgb: 127, 187, 158;
$neptune-green-light: mix(#fff, $neptune-green, 20%);
$neptune-green-dark: mix(#000, $neptune-green, 20%);
.element {
color: $neptune-green;
box-shadow: 0 0 0 2px rgba($neptune-green, 0.35);
}