teinte
配色を数値と色名で整理するデスクトップアプリ。画像から構成色を抽出し、Open Color・Tailwind の色名と照合できる。
特徴
- 01
感覚で終わらせず、構成色・コントラスト・近似色を比較可能な材料に整理して、良いと感じた配色を言葉と数値で振り返ることができる。
- 02
画像をサンプリングして支配色をk-meansデータを指定した数のグループに分類する統計手法。ここでは画像の色を代表色にまとめるために使う。でクラスタリングして代表色にまとめ、CIEDE2000CIE（国際照明委員会）が定めた色差の計算方式。単純なRGB値の差より人間の視覚的な近さに近い結果になる。でOpen Colorオープンソースの名前付きカラーパレット。FigmaなどのUIツールで広く使われている。やTailwindCSSフレームワークのカラーパレット。blue-500のような色名で色が定義されている。照合には主要な色のサブセットを使用している。の色名に対応付ける。ベース・アソート・アクセントの役割分担、WCAGWebアクセシビリティの国際基準。コントラスト比の計算方式を定める。このアプリでは支配色1位と2位の間でコントラスト比を計算している。コントラスト、PCCS色相・明度・彩度を組み合わせたトーン分類体系。「ビビッド」「ペール」などのトーン名がある。このアプリではPCCS風の近似実装を使用している。風トーンも並べるが、数値は正解ではなく、主観的な良さを説明するための補助線として扱う。
用語
- Open Color
- オープンソースの名前付きカラーパレット。FigmaなどのUIツールで広く使われている。
- Tailwind
- CSSフレームワークのカラーパレット。blue-500のような色名で色が定義されている。照合には主要な色のサブセットを使用している。
- k-means
- データを指定した数のグループに分類する統計手法。ここでは画像の色を代表色にまとめるために使う。
- CIEDE2000
- CIE（国際照明委員会）が定めた色差の計算方式。単純なRGB値の差より人間の視覚的な近さに近い結果になる。
- WCAG
- Webアクセシビリティの国際基準。コントラスト比の計算方式を定める。このアプリでは支配色1位と2位の間でコントラスト比を計算している。
- PCCS
- 色相・明度・彩度を組み合わせたトーン分類体系。「ビビッド」「ペール」などのトーン名がある。このアプリではPCCS風の近似実装を使用している。