色名 · #74918E
Juniper
Juniperは#74918E：rgb(116 145 142)、hsl(174 12% 51%)、oklch(0.634 0.033 188.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Juniper color name →
#74918E
oklch(0.634 0.033 188.6)
カラー変換
- HEX
- #74918e
- RGB
- rgb(116 145 142)
- HSL
- hsl(174 12% 51%)
- HWB
- hwb(174 45% 43%)
- OKLCH
- oklch(0.634 0.033 188.6)
- OKLab
- oklab(0.634 -0.033 -0.005)
- CIE Lab
- lab(57.87 -11.08 -1.96)
- LCH
- lch(57.87 11.25 190)
- CMYK
- cmyk(20% 0% 2% 43%)
ティント · シェード · トーン
ティント
- 819C99
- 8FA6A4
- 9CB1AF
- AABCBA
- B8C7C5
- C6D2D0
- D4DDDC
- E2E8E7
- F0F4F3
シェード
- 647D7B
- 546A68
- 455856
- 374644
- 293534
- 1B2524
- 0F1515
- 050707
- 010101
トーン
- 758F8D
- 778E8B
- 788C8A
- 798A88
- 7B8987
- 7C8786
- 7D8584
- 7E8383
- 7F8281
カラーハーモニー
補色 +180°
- 74918E
Juniper
- 9D8286
≈ Plumville
類似色 -30° +30°
- 74918E
Juniper
- 7A9183
≈ Cyanara
- 748F98
≈ Sheltered Bay
トライアド +120° +240°
- 74918E
Juniper
- 90859A
≈ Purple Ash
- 988775
≈ Bedbox
スプリットコンプリメンタリー +150° +210°
- 74918E
Juniper
- 988391
≈ Quixotic
- 9D847C
≈ Pigeon Pink
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.39:1 · APCA Lc 61
Ag
AA黒の上
WCAG 6.18:1 · APCA Lc 40
最適な文字色: #000000
WCAG 6.18:1 (AA) · APCA Lc 40
Contrast pairs
コードスニペット
CSS
:root {
--juniper: #74918e;
--juniper-rgb: 116 145 142;
--juniper-oklch: oklch(0.634 0.033 188.6);
}
.element {
color: var(--juniper);
background-color: hsl(174 12% 51%);
border-color: oklch(0.634 0.033 188.6);
}Tailwind CSS v4
@theme {
--color-juniper: #74918e;
--color-juniper-50: #ebf8f7;
--color-juniper-100: #dcecea;
--color-juniper-200: #c5d9d7;
--color-juniper-300: #a5bdbb;
--color-juniper-400: #89a5a2;
--color-juniper-500: #6e8e8a;
--color-juniper-600: #5d7875;
--color-juniper-700: #4a605e;
--color-juniper-800: #364644;
--color-juniper-900: #25312f;
--color-juniper-950: #131d1c;
}SCSS
$juniper: #74918e;
$juniper-rgb: 116, 145, 142;
$juniper-light: mix(#fff, $juniper, 20%);
$juniper-dark: mix(#000, $juniper, 20%);
.element {
color: $juniper;
box-shadow: 0 0 0 2px rgba($juniper, 0.35);
}