色名 · #BB1122
Ruby Star
Ruby Starは#BB1122：rgb(187 17 34)、hsl(354 83% 40%)、oklch(0.504 0.197 24.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Ruby Star color name →
#BB1122
oklch(0.504 0.197 24.9)
カラー変換
- HEX
- #bb1122
- RGB
- rgb(187 17 34)
- HSL
- hsl(354 83% 40%)
- HWB
- hwb(354 7% 27%)
- OKLCH
- oklch(0.504 0.197 24.9)
- OKLab
- oklab(0.504 0.179 0.083)
- CIE Lab
- lab(40.5 62.51 40.63)
- LCH
- lch(40.5 74.56 33)
- CMYK
- cmyk(0% 91% 82% 27%)
ティント · シェード · トーン
ティント
- C5393A
- CF534F
- D76B64
- DF817A
- E7968F
- EDABA5
- F3C0BB
- F8D5D1
- FCEAE8
シェード
- A20D1C
- 8A0916
- 730611
- 5C040B
- 460207
- 320103
- 1F0001
- 0D0000
- 020000
トーン
- B72A2E
- B33A38
- AE4642
- A9504C
- A45A55
- 9E625D
- 986A66
- 91726F
- 897977
カラーハーモニー
補色 +180°
- BB1122
Ruby Star
- 00727C
≈ Scurf Green
類似色 -30° +30°
- BB1122
Ruby Star
- B1146A
≈ Plum Paradise
- 994D00
≈ Warm Brown
トライアド +120° +240°
- BB1122
Ruby Star
- 007A1D
≈ Spreadsheet Green
- 2A57D3
≈ Bnei Brak Bay
スプリットコンプリメンタリー +150° +210°
- BB1122
Ruby Star
- 007661
≈ Tropical Rainforest
- 006D98
≈ Disarm
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.52:1 · APCA Lc 80
Ag
Fail黒の上
WCAG 3.21:1 · APCA Lc 22
最適な文字色: #FFFFFF
WCAG 6.52:1 (AA) · APCA Lc 80
Contrast pairs
コードスニペット
CSS
:root {
--ruby-star: #bb1122;
--ruby-star-rgb: 187 17 34;
--ruby-star-oklch: oklch(0.504 0.197 24.9);
}
.element {
color: var(--ruby-star);
background-color: hsl(354 83% 40%);
border-color: oklch(0.504 0.197 24.9);
}Tailwind CSS v4
@theme {
--color-ruby-star: #bb1122;
--color-ruby-star-50: #ffe0d7;
--color-ruby-star-100: #ffcfc5;
--color-ruby-star-200: #ffb3a7;
--color-ruby-star-300: #ff8c80;
--color-ruby-star-400: #fd6561;
--color-ruby-star-500: #ec373d;
--color-ruby-star-600: #c83134;
--color-ruby-star-700: #a12729;
--color-ruby-star-800: #781a20;
--color-ruby-star-900: #551115;
--color-ruby-star-950: #390207;
}SCSS
$ruby-star: #bb1122;
$ruby-star-rgb: 187, 17, 34;
$ruby-star-light: mix(#fff, $ruby-star, 20%);
$ruby-star-dark: mix(#000, $ruby-star, 20%);
.element {
color: $ruby-star;
box-shadow: 0 0 0 2px rgba($ruby-star, 0.35);
}