Featured image of post Leonardo

Leonardo

Adobe がオープンソースとして提供しているツール

どんなツールか?

Leonardo は、ターゲットのコントラスト比に基づいて色を生成・設計できる Web ベースのカラーツールです。デザインシステムやデータ可視化で使う アクセシブル(視認性・色覚対応)な配色を構築したり、テーマ全体の色体系を管理するための支援ツールとして機能します。基本的には Adobe がオープンソースとして提供しているカラーモジュールを活用したツールです。

機能

  • コントラスト比ベースの色生成…指定した 目標コントラスト比 に合致する色を自動生成し、アクセシビリティ基準(WCAG)の要件を満たす配色が得られます。 
  • 色テーマ設計/管理…カラースケールやテーマ全体の構造を作成・調整し、デザインシステム向けの アクセシブルテーマ を構築。 
  • 視覚的評価と出力…色間のコントラスト、色差、色空間上の位置などを視覚的に評価でき、必要に応じて SVG やコード(CSS カスタムプロパティ、デザイントークン)として出力。 
  • 適応型(ダーク/ライト)テーマ対応…明るさ・彩度・コントラストを調整して ライトモード/ダークモード に適応する配色を生成可能。

使い方

    1. 色のベース設定…ベースとなる色や背景色、目標のコントラスト比を指定。 
    1. 配色生成・調整…自動生成された色スウォッチを確認し、必要に応じて色空間や比率を調整。 
    1. 結果のエクスポート…SVG、カラーコード一覧、CSS/JS/デザイントークンなど任意の形式で出力しプロジェクトに活用。
最終更新 30304-1212-15
Hugo で構築されています。
テーマ StackJimmy によって設計されています。