Firecracker
Web code
Get CSS, SCSS, & Tailwind code for development
App tokens
Get Android, Flutter, Swift, & MAUI tokens
HDR gradient
Switch to HDR to enhance the gradient
Quick view
Inspect colors in multiple color spaces
Colors overview
Red
Orange
Color | HEX | RGB | HSL | HWB | LCH | LAB | CMYK | Color schemes |
---|---|---|---|---|---|---|---|---|
| #ff4747 | rgb(255, 71, 71) | hsl(0 100% 64%) | hwb(0 28% 0%) | lch(59.1 82.2 32.2) | lab(59.1 69.6 43.8) | cmyk 0%, 72%, 72%, 0% | |
| #ff603e | rgb(255, 96, 62) | hsl(11 100% 62%) | hwb(11 24% 0%) | lch(62.4 79.6 40.7) | lab(62.4 60.3 51.9) | cmyk 0%, 62%, 76%, 0% | |
| #ff7733 | rgb(255, 119, 51) | hsl(20 100% 60%) | hwb(20 20% 0%) | lch(66.3 78.6 50.3) | lab(66.3 50.2 60.5) | cmyk 0%, 53%, 80%, 0% | |
| #ff8c23 | rgb(255, 140, 35) | hsl(29 100% 57%) | hwb(29 14% 0%) | lch(70.3 80.2 60) | lab(70.3 40.1 69.5) | cmyk 0%, 45%, 86%, 0% | |
| #ffa200 | rgb(255, 162, 0) | hsl(38 100% 50%) | hwb(38 0% 0%) | lch(74.9 83.9 69.8) | lab(74.9 29 78.7) | cmyk 0%, 36%, 100%, 0% |
Click a color format to copy to your clipboard.
Contrast ratios checker
Click one color card to view the complete contrast checker tests.
#ff4747
AA - 3.36
#ff603e
AA - 3
#ff7733
AA - 2.64
#ff8c23
AA - 2.32
#ffa200
AA - 2.01
Color blindness
The simulation of color blindness may not be 100% accurate sometimes.
Colors preview as gradient with protanopia
Colors preview as palette with protanopia
UI components preview
Preview the gradient in different UI components.
32°
CPU
48°
GPU
100%
Usage
11°
Rain
70%
Storage
PWA prompt