
## 色関数とは
rgb(255,255,255)はもろに色関数。色関数にも種類があり、rgbのRGBAやHSLはCSS Color Module 3(2011年)のもの。次世代のCSS Color Module 4ではHWBやOklchなどがある。  


## HSLとOKLCHの比較

| 特性          | HSL                    | OKLCH                          |
|--------------|------------------------|--------------------------------|
| **CSSでの指定** | hsl(H S L[ / A])      |  oklch(L C H[ / A])             |
| **色相 (H)** | 0から360度の範囲        | 0から360度の範囲                |
| **彩度 (S/C)** | 0%から100% (パーセンテージ) | 数値で表され、最大値は色空間に依存 |
| **明度 (L)** | 0%から100% (パーセンテージ) | 0から100の範囲の数値             |
| **色の表現** | 直感的で使いやすい      | 色の知覚的均一性に優れる         |
| **用途**     | 一般的なWebデザインやアプリケーション | 専門的なデザインや色の一貫性が重要な用途 |
| **色の調整** | 色相を変えるだけで簡単に色のバリエーションを生成 | 明度や彩度を変えても色相が保持されるため、異なる明度での色の調和が容易 |

### 説明:

- **色相 (Hue)**: 両モデルともに色相は度数で表され、色の種類（赤、緑、青など）を定義します。
- **彩度 (Saturation/Chroma)**: HSLではパーセンテージで彩度を表し、色の鮮やかさを示す。OKLCHでは彩度が数値で表され、色の純度を示すため、より精密な色調整が可能
- **明度 (Lightness)**: HSLでは明度もパーセンテージで表され、0%が黒、100%が白。OKLCHでは明度が数値で表され、より広範な色調整が可能
- **色の表現と用途**: HSLは直感的で、誰でも簡単に色を選ぶことができるが、OKLCHは色の均一性を重視しており、専門的な用途に使われるらしい。

どちらにも基準の色から色を足し引き等で指定できる。  
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))  
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)  

## 感想
使うのは実際骨が折れそう。特にデザイナーは慣れない色指定方法になるだろうし。  
エンジニア視点だと基準を決めればそれに応じた色を出せるようになるというのは夢があるが。



### 参考文献
- [Xユーザーのjhey ▲🐻🎈さん: 「Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥](https://x.com/jh3yy/status/1770948509933445269)
- [Theming with CSS color functions 🤙](https://codepen.io/jh3y/pen/rNbmBrE)
- [oklch() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)
- [hsl() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
- [CSS の 色関数 について #CSS3 - Qiita](https://qiita.com/pon_u/items/0c216ee81f3b7aa04f98)


色関数について調べたことと感想

CSSの色関数について調べたこと


まずはこちらをご覧ください。毒々しいCSSが施されたselect要素です。
![chrome-normal](https://i.gyazo.com/a3079d8e10a42eb46b9d55d1f99e6c97.png)

上の画像のようなちょっと変わったデザインのselect要素を作った時、ChromeやOperaではfocus状態の時は次のようになります。  
![chrome-focus-default](https://i.gyazo.com/15638460feada9a82dfb8df92a5ccc7b.png)

毒々しくしたいのですがデフォルトの青い枠線が中途半端にかかり、邪魔になっています。
そんな時、borderとかなり似ている[outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)というプロパティを使います。
```css
.poison-select:focus {
  outline: 1px solid #ff0;
  /* Chromeなどでのデフォルトの色味を設定したい場合は「-webkit-focus-ring-color」を設定する */
  /* outline: 1px solid -webkit-focus-ring-color; */
}
```

![chrome-focus-custom](https://i.gyazo.com/81d1875832d0538bdded5a56d7af5895.png)

いい感じにすることができました。  
safariでも見てみましょう。

![safari-focus-without-offset](https://i.gyazo.com/151a452bffb8191e2c8949781dc14769.png)

違和感がありますよね？  
大きく2点で違いがあります。
* safariではselect要素の内側にfocus時の枠線ができる
* safariではoutline要素にradiusが効かない(※2023年3月27日リリースの[Safari V16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/)から解消)

主に1点目の「select要素の内側にfocus時の枠線ができる」時の対策に[outline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)を明示的に設定(0pxで)してあげます。

```css
.poison-select:focus {
  outline: 1px solid #ff0;
  outline-offset: 0px;
}
```
すると綺麗になります。  
![safari-focus-without-offset](https://i.gyazo.com/65572abbec5eaf9876f7e66ceef26857.png)


### Reproduction
<iframe src="https://codesandbox.io/embed/affectionate-surf-e2w97d?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="affectionate-surf-e2w97d"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

### 参考文献
- [outlineプロパティで作った枠線は角丸にすることができない - dskd](https://dskd.jp/archives/73.html)
- [css - What is the default style of the blue focus outline in Chrome? - Stack Overflow](https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome)

やっぱりsafariはおかしいね。select要素を少しカスタマイズしようとしたところにも地雷がある。

select要素をCSSでカスタマイズする際に気をつけるべきブラウザごとの差


### 疑問に遭遇した状況
cssでtransformを使ったスタイリングが、なぜかWindows環境だけで見受けられるぼやけるという報告を受けて、ぼやっと[キャンバスの最適化](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)のページを見ていると次のような記述がありました。
> キャンバスで整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。
> <cite>出典: [浮動小数点数値の座標を避けて整数を使用](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0%E5%80%A4%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E9%81%BF%E3%81%91%E3%81%A6%E6%95%B4%E6%95%B0%E3%82%92%E4%BD%BF%E7%94%A8)</cite>

### サブピクセルレンダリングとは
wikipediaによると
> サブピクセルレンダリング(Subpixel rendering)とは、液晶・有機ELモニタ上のピクセルを構成する三原色の発光源を、仮想的にそれぞれ一つのピクセルとみなして横方向に三倍の解像度を得る技術のことである。 アンチエイリアスの一種。
> <cite>出典: [サブピクセルレンダリング - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%96%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)</cite>
>

アンチエイリアスといえば、斜めにギザギザしたものをできるだけ真っ直ぐ見せるための技術と理解してる。  
各種ブラウザ（とOSが協調している）はデフォルトでアンチエイリアスが効いている。  
そしてCSSではfont-smoothというプロパティがある。  
```css
.something {
  -webkit-font-smoothing: antialiased; // auto | none | antialiased | subpixel-antialiased
  -moz-osx-font-smoothing: grayscale; // auto | grayscale
}
```
主にすでにかかったアンチエイリアスを効かせない方向に調整するためのもの。  
要は綺麗に見せたい場合では、ブラウザとOSに任せるしかなく、transformを適用しすぎてジャギジャギのままになった箇所はtransformによるスタイリングをやめるほかないと思う。  
試せていないが、遭遇したのは少数を含む指定だったので、transformを過剰に使ってもその指定が整数ならもしかするかもしれない（整数で済むような要件ならtransformを使っていない気がする）。

直接この答えになるような記事等は見つけられていないがMDNには次のような記述もある
> CSS 座標変換は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。
> <cite>出典: [CSS 座標変換を使用してキャンバスを拡大縮小する](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#css_%E5%BA%A7%E6%A8%99%E5%A4%89%E6%8F%9B%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9%E3%82%92%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F%E3%81%99%E3%82%8B)</cite>

canvasと同一視するのはどうかとも思うが、大きく離れてもいなさそうだと思う私でした。

### 参考文献
- [Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）](http://creator.dwango.co.jp/14128.html)
- [CSS 座標変換の使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- [font-smooth - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-smooth)

transformを過剰にあてた結果、ぼやけて表示されるフォントに救いのてはあるのか？いや、ない。

ikmnjrd.github.io

デザインの投稿記事一覧