颜色模式—RGB、HSL、HSB、HSV、CMYK | hsl hsv
前言CSS3之前,定义颜色的两种方式分别为RGB和16进制模式。这两种方式并没有太多的差别,相互转换也只是10进制和16进制之间的转换。RGB唯一的优点就是可以用rgba在设置颜色的同时设置透明度,而16进制需要使用opacity辅助。在一般的网页制作中这两种模式已经足够,可是在一些特殊场景下,需要用到其他的颜色模式。比如CSS3支持的HSL模式。几种颜色模式RGBRGB=Red(红)+Green(绿)+Blue(蓝)取值范围:rgb(0~255,0~255,0~255)示例:白色:rgb(255,255,255)黑色:rgb(0,0,0)原理(加法原色):RGB是从颜色发光的原理来设计定的,通俗点说它...
前言CSS3 之前,定义颜色的两种方式分别为 RGB 和 16进制 模式。
这两种方式并没有太多的差别,相互转换也只是 10进制 和 16进制 之间的转换。RGB 唯一的优点就是可以用rgba在设置颜色的同时设置透明度,而 16进制 需要使用opacity辅助。
在一般的网页制作中这两种模式已经足够,可是在一些特殊场景下,需要用到 其他的颜色模式。比如 CSS 3 支持的 HSL 模式。
几种颜色模式RGBRGB = Red (红) + Green (绿) + Blue (蓝)
取值范围 :rgb(0~255, 0~255, 0~255)
示例:白色:rgb(255, 255, 255) 黑色:rgb(0, 0, 0)
原理(加法原色):RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于两者亮度之总和,越混合亮度越高,即加法混合。
CMYKCMYK = Cyan (青) + Magenta (品红) + Yellow (黄) + Key Plate(blacK) (黑)
原理(减法原色):印刷四色模式是彩色印刷时采用的一种套色模式,与RGB的发光色彩模式不同,它是反光的色彩模式。
HSLHSL = H (色相) + Saturation (饱和度) + Lightness (亮度)
取值范围: hsl(0~360, 0~100%, 0~100%)
示例: 红色:hsl(0, 100%, 50%)
原理:
HSL 色相值:0°:红色60°:黄色120°:绿色180°:青色240°:蓝色300°:品红色360°:红色
HSL饱和度值: hsl(45,x%,50%)x%: 0% ~ 100% (灰色 ~ 色相值颜色)
HSL亮度值: hsl(90,100%,x%)x%: 0% ~ 50% ~ 100% (黑色 ~ 色相值颜色 ~ 白色)
HSVHSV = H (色相) + Sa...