search

magicdawn / magicdawn

个人学习 / 代码 / 总结 / 读书笔记
25 stars 3 forks source link

Colors 颜色 #41

Open magicdawn opened 9 years ago

magicdawn commented 9 years ago

All about colors.

中: "给你点颜色看看" ❌ I will teach you a lesson ✅ give you some color to see see

[!CAUTION] Issue 太乱了, 已整理 md https://github.com/magicdawn/magicdawn/tree/master/md/fe/css-color

magicdawn commented 9 years ago

http://tools.medialab.sciences-po.fr/iwanthue/theory.php

HSL = hue saturation light HSV = hue saturation value

HSL random colors

Colors with a low lightness will all look the same, whatever their value. The same with high lightness colors, and low saturation colors.

亮度lightness 较低的颜色, 看起来都是一样的, 此时他们的颜色hue 就不那么重要了. 亮度高时 / 饱和度低时也这样

http://www.css88.com/book/css/values/color/hsl.htm

magicdawn commented 7 years ago

https://cnodejs.org/topic/58e5f6d0147b1e0a5ec4e462

magicdawn commented 2 years ago

css pre defined colors

https://www.w3.org/wiki/CSS/Properties/color/keywords

magicdawn commented 2 years ago 
// https://www.bilibili.com/video/BV1g3411u7Lg/
color: #0545b2; // 理想之蓝
color: #f4cd00; // 柠檬黄
color: #ef2729; // 石榴红
color: #f89c00; // 鹿箭
color: #233728; // 黛绿 rational blue
color: #f2b9b7; // 和熙粉
color: #f3cc91; // 芝士黄 cheese yellow
color: #6b4c68; // 葡萄紫 grape purple
color: #ff7227; // 落日橙 sunset orange
color: #004d62; // 碧海天 ocean sky
color: #23909b; // 洗碧空 washing sky
color: #aeb400; // 芥丝绿 
color: #425a17; // 箬叶青 leaves green

image

magicdawn commented 2 years ago

some purple colors

name hex rgb preview
mediumslateblue #7b68ee 123,104,238 image
slateblue #6a5acd 106,90,205 image
#C6CFFF rgb(198,207,255) image

色卡

https://www.qtccolor.com/Article/381.aspx image

magicdawn commented 3 weeks ago

CSS 中颜色相关

颜色空间

https://developer.mozilla.org/en-US/docs/Glossary/Color_space

Color spaces are named organizations of colors for underlying color models of coordinate-based color arrangements. A color model defines how the components of a color (for example, the h, w, and b channels of an hwb() color) relate to a color space. Most color spaces are three- or four- dimensional grids that represent colors. Each dimension (or axis) corresponds to a different channel. Colors can be expressed in multiple color spaces, and can be transformed from one color space to another, while still looking the same.

简单来说, Color Space 是一种颜色的表示方法. 一个颜色可以用多个表示方法表示.

sumary

Q: rgb为什么还分这么多 这句话的意思是，尽管 `display-p3` 和 `sRGB` 都是通过 RGB 来表示颜色的（例如都用 [255, 0, 0] 来表示红色），但它们定义红、绿、蓝这三种颜色的“基准”坐标不同，因此相同的 RGB 数值在这两个色彩空间中实际显示出来的颜色会不同。 ### 详细解释 - **色彩空间的基准**：每个色彩空间定义了红、绿、蓝三个基色的具体光谱坐标。例如，在 `sRGB` 色彩空间中，红色的基准色是一个特定的波长值，而 `display-p3` 色彩空间中定义的红色基准稍有不同。因此，`display-p3` 中的红色基色比 `sRGB` 的红色更偏鲜艳、饱和一些。 - **相同的 RGB 数值，不同的颜色效果**：由于 `display-p3` 的基准红、绿、蓝色坐标和 `sRGB` 的不同，所以即便是相同的 RGB 数值（例如 `[255, 0, 0]` 表示纯红色），在 `display-p3` 中会显示得更鲜艳或更偏色一些，而在 `sRGB` 中则会偏淡、偏灰一些。对于屏幕来说，如果设备支持 `display-p3` 色彩空间，那么在 `display-p3` 模式下看到的 `[255, 0, 0]` 红色会显得更加鲜艳和浓烈，而在 `sRGB` 中看起来会相对朴素一些。 ### 举例说明 假设我们在 `sRGB` 和 `display-p3` 中都指定 RGB 值为 `[255, 0, 0]`： - 在 `sRGB` 中，这个颜色会显示为标准的红色。 - 在 `display-p3` 中，因色彩空间的基准不同，这个红色会显示得更亮、更饱和，看起来颜色更浓。 这种差异源于每种色彩空间定义的红、绿、蓝的基准坐标不同，即便 RGB 数值一致，视觉效果仍会有所不同。

sRGB

CIELab 类

hue 值

hue 用于 hsl() / hwb() / lch() / oklch()

色盘

https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel

css functions

定义颜色

颜色操作

color-mix()

magicdawn commented 3 weeks ago

design

hsb rules

https://www.learnui.design/blog/color-in-ui-design-a-practical-framework.html

hsl 由于是 double-cone, 可能并不适用?