色名 · #BFC3BF
Silver Tipped Sage
Silver Tipped Sageは#BFC3BF：rgb(191 195 191)、hsl(120 3% 76%)、oklch(0.813 0.007 145.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Silver Tipped Sage color name →
#BFC3BF
oklch(0.813 0.007 145.5)
カラー変換
- HEX
- #bfc3bf
- RGB
- rgb(191 195 191)
- HSL
- hsl(120 3% 76%)
- HWB
- hwb(120 75% 24%)
- OKLCH
- oklch(0.813 0.007 145.5)
- OKLab
- oklab(0.813 -0.006 0.004)
- CIE Lab
- lab(78.39 -1.99 1.51)
- LCH
- lch(78.39 2.49 142.8)
- CMYK
- cmyk(2% 0% 2% 24%)
ティント · シェード · トーン
ティント
- C5C9C5
- CCCFCC
- D2D5D2
- D8DBD8
- DFE1DF
- E5E7E5
- EBEDEB
- F2F3F2
- F8F9F8
シェード
- A6A9A6
- 8D908D
- 757875
- 5E605E
- 484A48
- 333433
- 1F201F
- 0D0E0D
- 020202
トーン
- B8BCB8
- B2B5B2
- ACAEAC
- A5A8A5
- 9FA19F
- 999A99
- 929492
- 8C8D8C
- 868686
カラーハーモニー
補色 +180°
- BFC3BF
Silver Tipped Sage
- C4C0C4
≈ Such Melodrama
類似色 -30° +30°
- BFC3BF
Silver Tipped Sage
- C1C2BD
≈ Gull Feather
- BDC3C1
≈ Polished Rock
トライアド +120° +240°
- BFC3BF
Silver Tipped Sage
- BFC2C6
≈ Mote of Dust
- C6C0BF
≈ Modest Silver
スプリットコンプリメンタリー +150° +210°
- BFC3BF
Silver Tipped Sage
- C2C1C6
≈ Mote of Dust
- C6C0C2
≈ Easter Rabbit
テトラード +90° +180° +270°
- BFC3BF
Silver Tipped Sage
- BEC3C6
≈ Metallic
- C4C0C4
≈ Such Melodrama
- C6C1BD
≈ Gallery Grey
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.78:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.77:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.77:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--silver-tipped-sage: #bfc3bf;
--silver-tipped-sage-rgb: 191 195 191;
--silver-tipped-sage-oklch: oklch(0.813 0.007 145.5);
}
.element {
color: var(--silver-tipped-sage);
background-color: hsl(120 3% 76%);
border-color: oklch(0.813 0.007 145.5);
}Tailwind CSS v4
@theme {
--color-silver-tipped-sage: #bfc3bf;
--color-silver-tipped-sage-50: #f4f6f4;
--color-silver-tipped-sage-100: #e6e8e6;
--color-silver-tipped-sage-200: #d2d5d2;
--color-silver-tipped-sage-300: #b5b8b5;
--color-silver-tipped-sage-400: #9c9f9c;
--color-silver-tipped-sage-500: #838783;
--color-silver-tipped-sage-600: #6f736f;
--color-silver-tipped-sage-700: #595c59;
--color-silver-tipped-sage-800: #414341;
--color-silver-tipped-sage-900: #2d2e2d;
--color-silver-tipped-sage-950: #1a1b1a;
}SCSS
$silver-tipped-sage: #bfc3bf;
$silver-tipped-sage-rgb: 191, 195, 191;
$silver-tipped-sage-light: mix(#fff, $silver-tipped-sage, 20%);
$silver-tipped-sage-dark: mix(#000, $silver-tipped-sage, 20%);
.element {
color: $silver-tipped-sage;
box-shadow: 0 0 0 2px rgba($silver-tipped-sage, 0.35);
}