Category
カラーの無料Webツール
9 個のカラー関連ツールを無料公開中。
カラーコード変換・パレット生成・コントラスト比チェック・色覚シミュレーション・グラデーションなど、配色作業に使える無料ツール集です。HEX/RGB/HSLの相互変換からアクセシビリティ確認まで対応します。
広告
Color Token Generator
カラーパレットを CSS変数 / Tailwind / Sass / Style Dictionary で一括出力
カラーデザイン開発者向け
使ってみる →
関連ガイド
配色をコードに落とす手順 — 形式変換・階調生成・トークン化
決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。
アクセシブルな配色を決める手順 — コントラスト比と色覚対応
Webやアプリの配色を、コントラスト比・色覚特性まで配慮してアクセシブルに決める手順を、パレット作成→コントラスト確認→色覚チェック→トークン出力の流れで解説します。
CSSカスタムプロパティでデザインシステムを構築する実践ガイド
CSS Variables（カスタムプロパティ）を使ってカラー・タイポグラフィ・スペーシングを一元管理し、保守性の高いデザインシステムを構築する方法を解説します。