a { /* Adjustments */ color: color(red alpha(-10%)); color: color(red tint(-10%)); /* lighten */ color: color(red shade(-10%)); /* darken */ /* Absolute */ color: color(red alpha(50%)); color: color(red hue(225)); color: color(red saturation(100%)); color: color(red lightness(50%)); color: gray(33); /* rgb(33, 33, 33) */ color: gray(33%); /* rgb(84, 84, 84) */ color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */ color: #0000ff80; /* rgba(0, 0, 255, 0.5) */ color: hwb(90, 0%, 0%, 0.5); /* like hsl() but easier for humans */ color: hsl(90deg 90% 70%); /* hsl(180, 90%, 70%) -- supports deg */ color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */ color: rgb(30 60 90 / 30%); /* rgba(30, 60, 90, 0.3) */ }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter