色名 · #E10D18
Tomato Baby
Tomato Babyは#E10D18：rgb(225 13 24)、hsl(357 89% 47%)、oklch(0.575 0.231 27.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Tomato Baby color name →
#E10D18
oklch(0.575 0.231 27.6)
カラー変換
- HEX
- #e10d18
- RGB
- rgb(225 13 24)
- HSL
- hsl(357 89% 47%)
- HWB
- hwb(357 5% 12%)
- OKLCH
- oklch(0.575 0.231 27.6)
- OKLab
- oklab(0.575 0.204 0.107)
- CIE Lab
- lab(48.38 72.65 55.75)
- LCH
- lch(48.38 91.57 37.5)
- CMYK
- cmyk(0% 94% 89% 12%)
ティント · シェード · トーン
ティント
- E83E37
- EE5A4F
- F37265
- F7887B
- FB9C91
- FEB1A6
- FFC4BC
- FFD8D2
- FFECE9
シェード
- C40A13
- A7070F
- 8B050A
- 700307
- 560204
- 3E0102
- 270001
- 120000
- 020000
トーン
- D92E2A
- D13F37
- C94C42
- C0564C
- B75F56
- AD675F
- A36E67
- 987570
- 8D7B78
カラーハーモニー
補色 +180°
- E10D18
Tomato Baby
- 008997
≈ Atlantic Blue
類似色 -30° +30°
- E10D18
Tomato Baby
- D70B79
≈ Vampire Love Story
- B46000
≈ Orangish Brown
トライアド +120° +240°
- E10D18
Tomato Baby
- 009237
≈ Pixelated Grass
- 3F65FE
≈ Blue Titmouse
スプリットコンプリメンタリー +150° +210°
- E10D18
Tomato Baby
- 008D78
≈ Emerald Enchantment
- 0082BA
≈ Tall Ships
テトラード +90° +180° +270°
- E10D18
Tomato Baby
- 738200
≈ Verde Tropa
- 008997
≈ Atlantic Blue
- 8D49EC
≈ Pericallis Hybrida
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.91:1 · APCA Lc 71
Ag
Fail黒の上
WCAG 4.27:1 · APCA Lc 30
最適な文字色: #FFFFFF
WCAG 4.91:1 (AA) · APCA Lc 71
Contrast pairs
コードスニペット
CSS
:root {
--tomato-baby: #e10d18;
--tomato-baby-rgb: 225 13 24;
--tomato-baby-oklch: oklch(0.575 0.231 27.6);
}
.element {
color: var(--tomato-baby);
background-color: hsl(357 89% 47%);
border-color: oklch(0.575 0.231 27.6);
}Tailwind CSS v4
@theme {
--color-tomato-baby: #e10d18;
--color-tomato-baby-50: #ffddcf;
--color-tomato-baby-100: #ffcbbb;
--color-tomato-baby-200: #ffac99;
--color-tomato-baby-300: #ff826e;
--color-tomato-baby-400: #ff554b;
--color-tomato-baby-500: #fb0017;
--color-tomato-baby-600: #d40f17;
--color-tomato-baby-700: #aa0f13;
--color-tomato-baby-800: #800611;
--color-tomato-baby-900: #5a060a;
--color-tomato-baby-950: #3d0001;
}SCSS
$tomato-baby: #e10d18;
$tomato-baby-rgb: 225, 13, 24;
$tomato-baby-light: mix(#fff, $tomato-baby, 20%);
$tomato-baby-dark: mix(#000, $tomato-baby, 20%);
.element {
color: $tomato-baby;
box-shadow: 0 0 0 2px rgba($tomato-baby, 0.35);
}