色名 · #006B57
Chrysocolla Medium Green
Chrysocolla Medium Greenは#006B57：rgb(0 107 87)、hsl(169 100% 21%)、oklch(0.471 0.09 173.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Chrysocolla Medium Green color name →
#006B57
oklch(0.471 0.09 173.9)
カラー変換
- HEX
- #006b57
- RGB
- rgb(0 107 87)
- HSL
- hsl(169 100% 21%)
- HWB
- hwb(169 0% 58%)
- OKLCH
- oklch(0.471 0.09 173.9)
- OKLab
- oklab(0.471 -0.089 0.01)
- CIE Lab
- lab(39.78 -31.59 3.4)
- LCH
- lch(39.78 31.77 173.8)
- CMYK
- cmyk(100% 0% 19% 58%)
ティント · シェード · トーン
ティント
- 2D7966
- 488776
- 5F9686
- 76A496
- 8DB3A7
- A3C2B8
- BAD1C9
- D1E0DB
- E8F0ED
シェード
- 005C4B
- 004E3E
- 003F33
- 003227
- 00251C
- 001812
- 000D08
- 000403
- 000000
トーン
- 1F6D5B
- 2F705F
- 3C7263
- 477467
- 52766B
- 5C786F
- 657A73
- 6E7C78
- 777E7C
カラーハーモニー
補色 +180°
- 006B57
Chrysocolla Medium Green
- 81445F
≈ Wild Plum
類似色 -30° +30°
- 006B57
Chrysocolla Medium Green
- 396839
≈ Vegas Green
- 006870
≈ Kingfisher Bright
トライアド +120° +240°
- 006B57
Chrysocolla Medium Green
- 5E5088
≈ Freshly Purpleized
- 814C26
≈ Mummy Brown
スプリットコンプリメンタリー +150° +210°
- 006B57
Chrysocolla Medium Green
- 744977
≈ Cabbage Blossom Violet
- 864542
≈ Spiced Berry
テトラード +90° +180° +270°
- 006B57
Chrysocolla Medium Green
- 415A8D
≈ Lambent Lagoon
- 81445F
≈ Wild Plum
- 735611
≈ Coffee Adept
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.48:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 3.24:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.48:1 (AA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--chrysocolla-medium-green: #006b57;
--chrysocolla-medium-green-rgb: 0 107 87;
--chrysocolla-medium-green-oklch: oklch(0.471 0.09 173.9);
}
.element {
color: var(--chrysocolla-medium-green);
background-color: hsl(169 100% 21%);
border-color: oklch(0.471 0.09 173.9);
}Tailwind CSS v4
@theme {
--color-chrysocolla-medium-green: #006b57;
--color-chrysocolla-medium-green-50: #dcfef4;
--color-chrysocolla-medium-green-100: #caf2e7;
--color-chrysocolla-medium-green-200: #ace1d3;
--color-chrysocolla-medium-green-300: #85c7b5;
--color-chrysocolla-medium-green-400: #61b09a;
--color-chrysocolla-medium-green-500: #369981;
--color-chrysocolla-medium-green-600: #30826e;
--color-chrysocolla-medium-green-700: #266858;
--color-chrysocolla-medium-green-800: #1b4c3f;
--color-chrysocolla-medium-green-900: #12352b;
--color-chrysocolla-medium-green-950: #042018;
}SCSS
$chrysocolla-medium-green: #006b57;
$chrysocolla-medium-green-rgb: 0, 107, 87;
$chrysocolla-medium-green-light: mix(#fff, $chrysocolla-medium-green, 20%);
$chrysocolla-medium-green-dark: mix(#000, $chrysocolla-medium-green, 20%);
.element {
color: $chrysocolla-medium-green;
box-shadow: 0 0 0 2px rgba($chrysocolla-medium-green, 0.35);
}