Nazwany kolor · #FF1493
Secret Story
Secret Story to #FF1493: rgb(255 20 147), hsl(328 100% 54%), oklch(0.655 0.261 356.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Secret Story color name →
#FF1493
oklch(0.655 0.261 356.9)
Konwersje koloru
- HEX
- #ff1493
- RGB
- rgb(255 20 147)
- HSL
- hsl(328 100% 54%)
- HWB
- hwb(328 8% 0%)
- OKLCH
- oklch(0.655 0.261 356.9)
- OKLab
- oklab(0.655 0.261 -0.014)
- CIE Lab
- lab(56.6 83.45 -4.12)
- LCH
- lch(56.6 83.55 357.2)
- CMYK
- cmyk(0% 92% 42% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF449D
- FF60A8
- FF78B2
- FF8DBD
- FFA2C8
- FFB5D3
- FFC8DE
- FFDAE9
- FFEDF4
Odcienie ciemniejsze
- DE107F
- BE0C6C
- 9E0859
- 800547
- 630336
- 480125
- 2E0116
- 160008
- 030001
Tony
- F43391
- E9448F
- DD518D
- D15B8B
- C5648A
- B96B88
- AC7186
- 9E7784
- 907C82
Harmonie kolorów
Komplementarna +180°
- FF1493
Secret Story
- 00A88F
≈ Shindig
Analogowa -30° +30°
- FF1493
Secret Story
- DD3BE1
≈ Méi Gūi Zǐ Purple
- FF3B38
≈ Red Orange
Triada +120° +240°
- FF1493
Secret Story
- 8B9B00
≈ Traffic Light Green
- 009CDC
≈ Atmosphere
Komplementarna rozszczepiona +150° +210°
- FF1493
Secret Story
- 00AE3F
≈ Poison Ivy
- 00A3B3
≈ Garish Blue
Tetrada +90° +180° +270°
- FF1493
Secret Story
- B48A00
≈ Loden Yellow
- 00A88F
≈ Shindig
- 5E88FF
≈ Deep Denim
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.63:1 · APCA Lc 62
Ag
AANa czerni
WCAG 5.77:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 5.77:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
CSS
:root {
--secret-story: #ff1493;
--secret-story-rgb: 255 20 147;
--secret-story-oklch: oklch(0.655 0.261 356.9);
}
.element {
color: var(--secret-story);
background-color: hsl(328 100% 54%);
border-color: oklch(0.655 0.261 356.9);
}Tailwind CSS v4
@theme {
--color-secret-story: #ff1493;
--color-secret-story-50: #ffd6f3;
--color-secret-story-100: #ffc3e6;
--color-secret-story-200: #ffa1d2;
--color-secret-story-300: #ff73b4;
--color-secret-story-400: #ff3ea1;
--color-secret-story-500: #fb0089;
--color-secret-story-600: #d40074;
--color-secret-story-700: #aa005d;
--color-secret-story-800: #7f0047;
--color-secret-story-900: #5a0031;
--color-secret-story-950: #3c001d;
}SCSS
$secret-story: #ff1493;
$secret-story-rgb: 255, 20, 147;
$secret-story-light: mix(#fff, $secret-story, 20%);
$secret-story-dark: mix(#000, $secret-story, 20%);
.element {
color: $secret-story;
box-shadow: 0 0 0 2px rgba($secret-story, 0.35);
}