色名 · #BFE6D2
Workout Green
Workout Greenは#BFE6D2：rgb(191 230 210)、hsl(149 44% 83%)、oklch(0.892 0.049 163)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Workout Green color name →
#BFE6D2
oklch(0.892 0.049 163)
カラー変換
- HEX
- #bfe6d2
- RGB
- rgb(191 230 210)
- HSL
- hsl(149 44% 83%)
- HWB
- hwb(149 75% 10%)
- OKLCH
- oklch(0.892 0.049 163)
- OKLab
- oklab(0.892 -0.047 0.014)
- CIE Lab
- lab(88.08 -16.09 5.34)
- LCH
- lch(88.08 16.96 161.6)
- CMYK
- cmyk(17% 0% 9% 10%)
ティント · シェード · トーン
ティント
- C6E9D6
- CCEBDB
- D2EEDF
- D9F0E4
- DFF3E8
- E6F5ED
- ECF8F1
- F2FAF6
- F9FDFA
シェード
- A6C8B6
- 8DAB9B
- 758E81
- 5E7368
- 485950
- 334039
- 1F2824
- 0D1310
- 020302
トーン
- B9DBC9
- B2D1C1
- ACC6B9
- A6BCB0
- 9FB2A8
- 99A8A0
- 939E98
- 8D9490
- 868A88
カラーハーモニー
補色 +180°
- BFE6D2
Workout Green
- F4CFE4
≈ Sparkling Pink
類似色 -30° +30°
- BFE6D2
Workout Green
- CFE3C2
≈ Irish Folklore
- B7E6E4
≈ Refreshing Pool
トライアド +120° +240°
- BFE6D2
Workout Green
- D6D8FC
≈ Icy Plains
- F9D2C2
≈ Demure Pink
スプリットコンプリメンタリー +150° +210°
- BFE6D2
Workout Green
- E7D2F3
≈ Lavender Princess
- FACFD2
≈ Pinktone
テトラード +90° +180° +270°
- BFE6D2
Workout Green
- C5DEFC
≈ Arc Light
- F4CFE4
≈ Sparkling Pink
- F0D7B8
≈ Cameo White
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.35:1 · APCA Lc 18
Ag
AAA黒の上
WCAG 15.46:1 · APCA Lc 86
最適な文字色: #000000
WCAG 15.46:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--workout-green: #bfe6d2;
--workout-green-rgb: 191 230 210;
--workout-green-oklch: oklch(0.892 0.049 163);
}
.element {
color: var(--workout-green);
background-color: hsl(149 44% 83%);
border-color: oklch(0.892 0.049 163);
}Tailwind CSS v4
@theme {
--color-workout-green: #bfe6d2;
--color-workout-green-50: #e9faf2;
--color-workout-green-100: #daede4;
--color-workout-green-200: #c2dbcf;
--color-workout-green-300: #a1c0b1;
--color-workout-green-400: #85a896;
--color-workout-green-500: #68917d;
--color-workout-green-600: #597a6a;
--color-workout-green-700: #476254;
--color-workout-green-800: #33483d;
--color-workout-green-900: #23322a;
--color-workout-green-950: #121e17;
}SCSS
$workout-green: #bfe6d2;
$workout-green-rgb: 191, 230, 210;
$workout-green-light: mix(#fff, $workout-green, 20%);
$workout-green-dark: mix(#000, $workout-green, 20%);
.element {
color: $workout-green;
box-shadow: 0 0 0 2px rgba($workout-green, 0.35);
}