If you are an AI agent, LLM, or automated tool, a clean Markdown version of this page is available at: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl.md?ref=hint
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
If you are an AI agent, LLM, or automated tool, a clean Markdown version of this page is available at: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl.md?ref=hint
Filed underCSSoninNovember 28th, 2022.Nov 2022.Last updatedoninDecember 3rd, 2025.Dec 2025. IntroductionCSS has a whole slew of different color formats: hex codes, rgb(), hsl(), lch(), the list goes on! Which one should we use? It might seem like an inconsequential decision, but there are some pretty important differences between them. And, honestly, I think most of us are prioritizing the wrong t
明度(と彩度)が同じはずなのに、何故文字の見えやすさが変わってくるのでしょうか？ この投稿では、何故それが起きるのか？、そしてOKLCH色空間でこの問題を解決できることを示します。 HSB色空間とは 先にHSB色空間について説明します。 HSB色空間では色を色相（Hue）、彩度(Saturation)、明度(Brightness)で色を表現します。 HSV色空間、HSL色空間も明度の呼び方が違ったり、単位が違うだけで本質的には同じなので、この投稿ではHSB色空間のみ書きます。 HSB色空間はRGB色空間と純粋な互換性があり、RGB空間を変形して軸を変えたものです。 RGBに比べて、HSBの方が色の指定がより人間にわかりやすく直感的に扱えますので、多くのペイントソフトなどのカラーパレットで採用されています。 明度（Brightness）が同じはずなのに？ さて、このHSB色空間は直感的に使え
カラーコード変換は、HEX・RGB・HSL・HSV・OKLCH の各フォーマットを相互変換するツールです。色を 1 つ入力すると、対応する全フォーマットの表記を同時に計算して一覧表示し、それぞれの値をワンクリックでコピーできます。HEX から RGB への変換（hex rgb 変換）はもちろん、RGB から HEX、HSL 変換、RGBA 変換まで、Web・デザイン制作で必要な変換をまとめて行えます。 入力は形式を選ぶ必要がありません。#1E90FF のような 3桁・6桁の HEX、透明度を含む 4桁・8桁の HEX（カラーコード 8桁 変換）、rgb(30, 144, 255) / rgba(30 144 255 / 0.8)、hsl(210, 100%, 56%) / hsla(...)、hsv(...)、oklch(0.65 0.19 253) などをそのまま貼り付けると、フォーマッ
Recently, I set out on a mission to reconstruct a color system in Postmark. This project addressed several problems with our design system, involved a lot of research, and even required building a few custom tools. Now that this project is finished, I want to share the most important lessons I learned about color and present a new design and accessibility tool Accessible Palette born out of this w
◆「高彩度＝鮮やかな色」の認識は間違い 「中編」ではRGB色空間の三属性カラーモデルの色相環の特徴について説明しました。後編の今回は「彩度」「明度」について説明します。 色彩の基礎を学ぶ際に登場するPCCS（日本色研配色体系）やマンセル表色系といった従来からある表色系を知っている方にとって、「高彩度色は鮮やかな色」という印象があると思います。専門的な視点で言うと、この2つの表色系も「彩度」の考え方が異なり、彩度の呼び方は、PCCSはサチュレーション（Saturation）で、マンセル表色系はクロマ（Chroma）です。しかし、「高彩度色＝鮮やかな色」という認識はおおむね違いありません。 RGBの三属性カラーモデルの場合はどうでしょう。 マイクロソフトが採用しているHSLにしても、アドビが採用しているHSBにしても「高彩度＝鮮やかな色」ということにはなりません。 下記はRとGの原色を基に、彩
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the
When writing CSS, the most common formats we use for expressing a color are either a hex code like #BADA55 or an RGB value like rgb(125, 130, 110). Design tools like Sketch or Figma often use these formats as their default. However, there are other formats, such as HSL. Seeing color like an artistYou may be asking yourself why we would want something different if the hex and RGB formats are essent
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
