色名 · #3BB773
Ceramic Green
Ceramic Greenは#3BB773：rgb(59 183 115)、hsl(147 51% 47%)、oklch(0.695 0.148 155.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Green mean? → · Ceramic Green color name →
#3BB773
oklch(0.695 0.148 155.1)
カラー変換
- HEX
- #3bb773
- RGB
- rgb(59 183 115)
- HSL
- hsl(147 51% 47%)
- HWB
- hwb(147 23% 28%)
- OKLCH
- oklch(0.695 0.148 155.1)
- OKLab
- oklab(0.695 -0.134 0.062)
- CIE Lab
- lab(66.49 -47.29 24.33)
- LCH
- lch(66.49 53.18 152.8)
- CMYK
- cmyk(68% 0% 37% 28%)
ティント · シェード · トーン
ティント
- 56BF81
- 6DC68F
- 81CD9C
- 94D5AA
- A7DCB8
- B9E3C6
- CBEAD4
- DCF1E2
- EEF8F1
シェード
- 329F63
- 298754
- 217045
- 195A36
- 114528
- 09311B
- 041E0F
- 010C05
- 000201
トーン
- 48B275
- 53AC76
- 5BA778
- 63A179
- 699C7B
- 6F977C
- 74917D
- 788B7E
- 7C867F
カラーハーモニー
補色 +180°
- 3BB773
Ceramic Green
- D476C1
≈ Purple Kush
類似色 -30° +30°
- 3BB773
Ceramic Green
- 88AC38
≈ Young Bud
- 00B5A7
≈ Glass Jar Blue
トライアド +120° +240°
- 3BB773
Ceramic Green
- 8393F7
≈ Periwinkle Blue
- E9775A
≈ Koeksister
スプリットコンプリメンタリー +150° +210°
- 3BB773
Ceramic Green
- B283E6
≈ Lavender Blossom
- E77190
≈ Loveland
テトラード +90° +180° +270°
- 3BB773
Ceramic Green
- 3CA4F2
≈ Rockman Blue
- D476C1
≈ Purple Kush
- DA861C
≈ Apricot Chicken
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.55:1 · APCA Lc 50
Ag
AAA黒の上
WCAG 8.20:1 · APCA Lc 52
最適な文字色: #000000
WCAG 8.20:1 (AAA) · APCA Lc 52
Contrast pairs
コードスニペット
CSS
:root {
--ceramic-green: #3bb773;
--ceramic-green-rgb: 59 183 115;
--ceramic-green-oklch: oklch(0.695 0.148 155.1);
}
.element {
color: var(--ceramic-green);
background-color: hsl(147 51% 47%);
border-color: oklch(0.695 0.148 155.1);
}Tailwind CSS v4
@theme {
--color-ceramic-green: #3bb773;
--color-ceramic-green-50: #d3ffe4;
--color-ceramic-green-100: #c0f7d4;
--color-ceramic-green-200: #9ee8bb;
--color-ceramic-green-300: #71ce99;
--color-ceramic-green-400: #46b877;
--color-ceramic-green-500: #00a158;
--color-ceramic-green-600: #00884b;
--color-ceramic-green-700: #006d3c;
--color-ceramic-green-800: #035028;
--color-ceramic-green-900: #03381b;
--color-ceramic-green-950: #00220b;
}SCSS
$ceramic-green: #3bb773;
$ceramic-green-rgb: 59, 183, 115;
$ceramic-green-light: mix(#fff, $ceramic-green, 20%);
$ceramic-green-dark: mix(#000, $ceramic-green, 20%);
.element {
color: $ceramic-green;
box-shadow: 0 0 0 2px rgba($ceramic-green, 0.35);
}