顏色(CSS)
CSS/顏色
RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了
RGB
RGB(0~255, 0~255, 0~255)
HSL
hsl(色相角度 0~360, 色彩飽和度 0~100%, 色彩明度 0~100%)
hsl(from blue h s l / 35%)
Hex
#000000
Hex colors
oklch
基於人眼看起來均等的色彩空間
L:明度
C:彩度
H:色相
可使用oklch()指定顏色
color: oklch(0.62 0.22 264)
CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単 | コリス
CSSの知っておくと便利な実装テクニック! 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます | コリス
@jh3yy: Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥
Magic! ✨
https://video.twimg.com/ext_tw_video/1770946957608902657/pu/vid/avc1/1080x1080/RlhoobG_xM3_5F6h.mp4?tag=14#.mp4
code:css
.success { --c: green; }
aside {
background: oklch(from var(--c) calc(l * 0.75) c h / 0.5);
color: oklch(from var(--c) calc(l * 1.5) c h);
}
A perceptual color space for image processing
OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog
oklab
Oklab Color Space : O3noBLOG
2025-03-09 CSS Relative Colors
from
相關連結
エンジニアのための配色まとめ
Web 開發者需要瞭解的基礎色彩理論