首页 > 其他分享 >丰富有趣的颜色空间

丰富有趣的颜色空间

时间：2024-08-11 16:29:12浏览次数：11  
标签：颜色 gradient 50% 89 rgba 0% 有趣 丰富

简介

颜色是视觉的表现，而自然界的颜色是多姿多彩的，如果让我们用语言描述一个自然界的颜色，有些人可能会用红橙黄绿蓝靛紫，外加一些修饰词，但它不太能够准确的描述一个颜色；有些人可能会用RGB，这其实就是一直颜色空间

颜色空间就像是一套套颜色语言，其将视觉上的颜色以数字的形式定义表示，使其能够准确描述某个颜色。简单地说就是颜色的数字化。不同颜色空间表达的颜色范围、适用范围也不尽相同，如常见的RGB，则主要使用于数字显示器使用，而CMYK则比较适用于印刷作品，一般情况下，RGB的颜色范围会比CMYK更广，这涉及到不同颜色空间对颜色的定义表示，接下来，将会详细介绍几种常用的颜色空间

色轮

在进入正题前，先看看下列这张图

color

思考一下，在前端界面中，如果我们想实现类似上图的色轮，一般要怎么实现？

  • 最简单想到的也许就是图片，准备好一张色轮图片，然后显示，用标签显示或canvas绘制

  • 也可以用js操作，根据某种规则计算每一个像素的颜色，然后用canvas绘制显示

  • 这里分享一种比较简单的实现方式，即CSS

    • 显示准备一个盒子容器，给它设置好基础样式，如大小圆角等

    • 然后给其添加以下CSS即可

/* 方法一: radial-gradient */
background: radial-gradient(
  circle at 50% 0,
  red,
  rgba(242, 13, 13, 0.8) 10%,
  rgba(230, 26, 26, 0.6) 20%,
  rgba(204, 51, 51, 0.4) 30%,
  rgba(166, 89, 89, 0.2) 40%,
  hsla(0, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 85% 15%,
  #ffbf00,
  rgba(242, 185, 13, 0.8) 10%,
  rgba(230, 179, 26, 0.6) 20%,
  rgba(204, 166, 51, 0.4) 30%,
  rgba(166, 147, 89, 0.2) 40%,
  hsla(45, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 100% 50%,
  #80ff00,
  rgba(128, 242, 13, 0.8) 10%,
  rgba(128, 230, 26, 0.6) 20%,
  rgba(128, 204, 51, 0.4) 30%,
  rgba(128, 166, 89, 0.2) 40%,
  hsla(90, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 85% 85%,
  #00ff40,
  rgba(13, 242, 70, 0.8) 10%,
  rgba(26, 230, 77, 0.6) 20%,
  rgba(51, 204, 89, 0.4) 30%,
  rgba(89, 166, 108, 0.2) 40%,
  hsla(135, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 50% 100%,
  #0ff,
  rgba(13, 242, 242, 0.8) 10%,
  rgba(26, 230, 230, 0.6) 20%,
  rgba(51, 204, 204, 0.4) 30%,
  rgba(89, 166, 166, 0.2) 40%,
  hsla(180, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 15% 85%,
  #0040ff,
  rgba(13, 70, 242, 0.8) 10%,
  rgba(26, 77, 230, 0.6) 20%,
  rgba(51, 89, 204, 0.4) 30%,
  rgba(89, 108, 166, 0.2) 40%,
  hsla(225, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 0 50%,
  #7f00ff,
  rgba(128, 13, 242, 0.8) 10%,
  rgba(128, 26, 230, 0.6) 20%,
  rgba(128, 51, 204, 0.4) 30%,
  rgba(128, 89, 166, 0.2) 40%,
  hsla(270, 0%, 50%, 0) 50%
),
radial-gradient(
  circle at 15% 15%,
  #ff00bf,
  rgba(242, 13, 185, 0.8) 10%,
  rgba(230, 26, 179, 0.6) 20%,
  rgba(204, 51, 166, 0.4) 30%,
  rgba(166, 89, 147, 0.2) 40%,
  hsla(315, 0%, 50%, 0) 50%
);

/* 方法二: conic-gradient */
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);

  • 以上两种CSS方式均可实现差不多的效果，兼容性前者会比后者略好，具体可看下图：

  • gradient

颜色空间

接下来，开始进入正题，以下是几种常见的颜色空间介绍

RGB

RGB可以算是最常用的一个颜色模型了，主要用于数字显示设备，其原理主要是将红R、绿G、蓝B三色光按不同强度进行叠加，以表现出各种颜色，形式可参考下图：

rgb1

在数字表示上，我们通常用一个三元组(r, g, b)显示，元组中的每一位分别表示对应颜色光的强度

可以用不同的方式量化：

  • 用从0到1的浮点数表示
  • 用百分比表示，从0%到100%
  • 最常用的则是用0-255的整数表示
    • 该方法主要是由于计算机采用1字节存储该值，即8 bit，最大数值为28-1
    • 故在这种表示方法中，RGB共有2563，即16777216种

当值均为0时，即无光，表示为黑色rgb(0, 0, 0)，当值均为最大时，表示为白色rgb(255, 255, 255)

几何模型大致可参考下图：

rgb

HEX

有时会用6位的16进制表示RGB颜色，每个分量用两位十六进制值00 - FF

有时，还会见到一些用四元组表示的RGB颜色，此时，第四位表示不透明度Alpha，如rgba(16, 28, 99, 0.5)，用16进制即为#101C6380(最后两位16进制值表示不透明度)

CMYK

CMYK是一种主要用于印刷行业的颜色模型，其原理是将C(青色Cyan)，M(品红色Magenta)，Y(黄色Yellow)，K(黑色Black)四种颜色颜料进行叠加，从而形成各种颜色，其中，K的作用是加深暗部色调，使黑足够黑，因为单纯的CMY三色很难混合出纯正的黑，最多不过是黑褐色罢了，形式可参考下图：

cmyk

在数字表示上，常用一个四元组表示，元组内分量用百分比表示

HSV/HSB

HSV和HSB是相同的颜色模型，只是叫法不同，其是用颜色的直观特性定义颜色，模型中的参数分别表示颜色的色调(色相)H、饱和度S、明度V

色调H

数值用角度度量，取值范围为0°～360°，从红色开始按逆时针方向计算，红色为0°，绿色为120°，蓝色为240°。它们的补色是：黄色为60°，青色为180°，品红为300°

饱和度S

主要表示颜色接近光谱色的程度，用0% ~ 100%的百分比表示，值越大越饱和。一种颜色，可以看成是某种光谱色与白色混合的结果，其中光谱色所占的比例越大，颜色的饱和度也就越高，饱和度高，颜色越深

另一种简单的理解可想像为水彩颜料，作画时需往里加水，加的谁越多，颜色越浅，饱和度越低

明度V

明度表示颜色明亮的程度或者说纯度，对于光源色，明度值与发光体的光亮度有关；对于物体色，此值和物体的透射比或反射比有关，取值范围通常为0% ~ 100%(暗 ~ 明)

具体的形式可参考下图：

hsv

从模型可以看出，H色调控制颜色的名称、类型(即哪一个颜色)；而颜色的冷暖、色调、明暗受S和V|B共同影响

HSL

HSL与HSB类似，但并不相同，是两个不同的颜色模型，其参数分别表示颜色的色调(色相)H、饱和度S、亮度L

色调H

同HSB一致，数值用角度度量，取值范围为0°～360°，用于表示颜色在色环上的位置

饱和度S

表示颜色的纯度，用0% ~ 100%的百分比表示，值越大越饱和，颜色越纯(彩)，值越小，颜色越灰

亮度L

亮度表示颜色的明亮程度，对于光源色，取值范围通常为0% ~ 100%(黑 ~ 白)，但值为0%时，颜色必定为黑，值为100%时，颜色为白

具体的形式可参考下图：

colorizer.org#hsl

从模型可看出，H控制颜色色调，与HSV一致；而S主要控制颜色的灰度冷暖；L控制颜色的明亮程度，由黑到Hue颜色再到白

HSV与HSL对比

具体可参考下图：

img

图中用一致的圆柱坐标表示，使对比更加直观，简单分析一下

  • 如果要表示纯黑纯白两个颜色，HSL只需控制L的值即可，而HSV需同时控制S与V的值

LAB

全称为CIE-LAB，是在1931年国际照明委员会CIE制定的颜色度量国际标准的基础上建立起来的，到了1976年，经修改后确立

LAB是基于人对颜色的感觉来设计的，更具体地说，它是感知均匀，简单地说就是其变化的幅度与人在视觉上感受到的变化幅度差不多

其中：

  • L主要表示颜色的亮度，取值范围为[0, 100]，从纯黑到纯白
  • A表示从红色到绿色的范围，取值为[-128, 127]
  • B表示从黄色到蓝色的范围，取值为[-128, 127]

具体形式可参考下图：

lab

LAB的色域是极大的，比上面提到的都大，可以在多个领域中起到关键作用，尤其是在需要高精度颜色管理和校准的应用中

一个常见的用途就是作为中间色，用于在不同设备之间进行颜色转换，例如，从RGB到CMYK的转换通常会先转换到LAB颜色空间，再转换到目标颜色空间

标签：颜色,gradient,50%,89,rgba,0%,有趣,丰富
From： https://www.cnblogs.com/skmcj/p/18353565

相关文章

  • BMC Genomics | 火龙果的转录组和代谢组分析揭示了果皮和果肉颜色形成的机制
    阐明火龙果果肉和果皮变色的候选基因和关键代谢产物，是培育具有优良新口味和高营养价值的火龙果的必要条件。在这里，使用转录组(RNA-Seq)和代谢组分析(UPLC-MS/MS)鉴定了属于两种不同量天尺属物种的三种火龙果的结构和调控基因以及与果皮和果肉颜色相关的关键代谢物。作者综合的转录......
  • 【Python】Python中一些有趣的用法
    Python是一种非常灵活和强大的编程语言，它有很多有趣的用法，以下是一些例子：一行代码实现FizzBuzz：print('\n'.join(['FizzBuzz'[i%3*4:i%5*8:-1]orstr(i)foriinrange(1,101)]))使用列表推导式生成斐波那契数列：fib=[0,1][fib.append(fib[-2]+fib[-1])for_......
  • 鸿蒙HarmonyOS NEXT开发：颜色渐变（ArkTS通用属性）
    颜色渐变设置组件的颜色渐变效果。说明：从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。linearGradientlinearGradient(value:{angle?:number|string;direction?:GradientDirection;colors:Array<[ResourceColor,number]......
  • RichTextBox每行使用不同的文字颜色
    privatevoidbtnStart_Click(objectsender,EventArgse){varshaps=newList<Shape>{newRectangle(),newTriangle(),newCicrle()};foreach......
  • 分享一个200年日历的黄道吉日sql数据打包供下载以及推荐一个好用的基于bootstrap的颜
    一、分享一个200年日历的黄道吉日sql数据打包    自己抓取的一套200年(1900-2100）全部日期的黄道吉日数据，分享出来，也在此备份以备以后自己要用。包括每天年月日,干支年,干支月,干支日,星期,阳历,农历,阴历月份,阴历日期,星座,胎神,五行,冲,煞,生肖,吉日,值......
  • 如何在DasViewer中把不同季节的模型调成一样的颜色？
    答：三维模型出现各种色差主要是因为原始照片色差造成的。比如外业航飞时的时间、季节、天气条件不一，相机的色调、清晰度、曝光等参数设置不同等，原始照片的色差会直接影响到后续三维模型的色彩表现，造成颜色不统一。为消除模型色差，需要对原始照片或者模型进行调色处理。针对图中......
  • vue3+vite+ts 颜色选择器组件支持颜色吸取,透明度
    ciw-color-picker-vue：vue3+vite+ts颜色选择器,支持颜色吸取,透明度，与浏览器原生颜色选择器相似,与饿了么颜色选择器相似使用了ciw-color-picker-vuenpmi ciw-color-picker-vue 安装 npmiciw-color-picker-vue全局引入方式main.ts或main.js import'ci......
  • Opencv学习-图像颜色空间
            通过红、绿、蓝3种颜色不同比例的混合能够让图像展现出五彩斑斓的颜色，这种模型称为RGB颜色模型。RGB颜色模型是最常见的颜色模型之一，常用于表示和显示图像。为了能够表示3种颜色的混合，图像以多通道的形式分别存储某一种颜色的红色分量、绿色......
  • HSSFColor.HSSFColorPredefined 颜色分类
    原文：https://blog.csdn.net/shanghaojiabohetang/article/details/51837242   ......
  • P3200 [HNOI2009] 有趣的数列
    哇，太恶心了思路首先我们将题意简化，简化后为对于任意一个偶数位所填数必然大于等于自己的下标，那么考虑填数，如果填的偶数比奇数多，那么此时要么填尽偶数后失败，或者下一个位置填奇数就炸，比如偶数刚好多一个，那么必然有一个偶数放在了奇数位，那么本来下一个要填的偶数往前移了一个，导致......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99