#D6E2B6 カラーコードのインサイト

自信を持ってデザインするために必要な、すべての変換、ハーモニー、アクセシビリティチェック。

RGB:rgb(214, 226, 182)
HSL:hsl(76, 43%, 80%)
画像から色を選ぶカラーピッカー
HEX
#D6E2B6
RGB
214, 226, 182
HSL
76°, 43%, 80%
HSV
76°, 19%, 89%
CMYK
5%, 0%, 19%, 11%

色の変換

複数のカラーモデルにわたる値を一箇所で生成します。

#D6E2B6

≈ スチールブルー

参照カラーカード

ΔEが低いほど、視覚的な一致度が高いことを意味します

色合いと濃淡

#D6E2B6を白または黒と混ぜたときの変化を探求しましょう。これらのスウォッチは、ホバー状態、シャドウ、背景に最適です。

ホバーして任意のHEX値をコピーし、インターフェース全体で再利用できます。

濃淡 (シェード)

0–100%
0%#D6E2B6
10%#C6D699
20%#B6CB7C
30%#A5BF5F
40%#93AF46
50%#7A923A
60%#62752F
70%#495823
80%#313A17
90%#181D0C
100%#000000

色合い (ティント)

0–100%
0%#D6E2B6
10%#DAE5BD
20%#DEE8C5
30%#E2EBCC
40%#E7EED3
50%#EBF0DB
60%#EFF3E2
70%#F3F6E9
80%#F7F9F0
90%#FBFCF8
100%#FFFFFF

一般的な使用例

  • UIコンポーネントの状態(ホバー、アクティブ、無効)
  • シャドウとハイライトによる奥行きの作成
  • 一貫性のあるカラーシステムの構築

デザインシステム

デザインシステムのヒント

これらのバリエーションは、まとまりのあるパレットの基盤を形成します。これらをエクスポートして、マーケティング、製品、エンジニアリングの連携を保ちましょう。

パレットをエクスポート

カラーハーモニー

#D6E2B6から生成されたハーモニーを使用して、バランスの取れたパレットを即座に構築します。

任意のスウォッチをクリックすると、その詳細ページが開き、さらに探求できます。

使用方法

1つの支配的な色を選び、補助的な色相をタイポグラフィ、サーフェス、行動喚起ボタンのアクセントとして機能させます。

重要性

バランスの取れたハーモニーは、レイアウトを圧倒することなく、意図(落ち着き、エネルギッシュ、プレミアムなど)を伝えます。

補色

インパクトと大胆なコントラストを生み出す反対の色相。

最適

インパクトの強いCTA、ロゴ、ヒーローセクション

類似色

自然で流動的なグラデーションのための隣接する色相。

最適

自然にインスパイアされた、落ち着いたダッシュボード

トライアド (三色相)

遊び心のあるバランスのための、均等に配置された3つの色相。

最適

遊び心のあるブランディングと編集レイアウト

テトラッド (四色相)

豊かな多様性をもたらす2組の補色。

最適

イラストレーションとマーケティングの実験

モノクロマティック (単色)

同じ色相ファミリー内の明るい色と暗い色。

最適

ミニマリストなインターフェースとプレミアムなUI状態

アクセシビリティのコントラスト

すべての訪問者が明確な体験を楽しめるよう、#D6E2B6が一般的なテキストの色でどれだけ読みやすいかを確認します。

本文のコピーにはAAをベースラインとして使用し、プレミアムなアクセシビリティにはAAAを使用してください。

黒のテキスト上のサンプルテキスト
テキストの色#000000
背景#D6E2B6
コントラスト比15.41:1
WCAGレベルAAA
白のテキスト上のサンプルテキスト
テキストの色#FFFFFF
背景#D6E2B6
コントラスト比1.36:1
WCAGレベルFail
推奨されるテキストプレビュー
テキストの色#000000
背景#D6E2B6
コントラスト比15.41:1
WCAGレベルAAA

技術的な形式

XYZ、LAB、CMYKバリアント、エクスポート対応プロファイルなどのプロフェッショナルな色空間をロック解除します。

無料でサインアップ

実用的な形式

印刷シミュレーション、LEDマッピング、開発者向けのバイト順序を取得します。

無料でサインアップ

色分析

スペクトルデータ、優位性レポート、高度な分析を詳しく調べます。

無料でサインアップ

色覚シミュレーター

#D6E2B6が一般的な色覚異常でどのように見えるかをプレビューします。

無料でサインアップ

クリエイティブな側面

季節の関連性、感情的な手がかり、自然界での出現を探求します。

無料でサインアップ

デザインガイダンス

バランス

#D6E2B6をハイライトとして扱います。ニュートラルカラーと1つの補助的な色相と組み合わせて、視覚的な過負荷を避けてください。

コントラスト

実際のコンテンツで組み合わせをテストします。コントラストが高いほど、スキャン、可読性、コンバージョンが向上します。

ハーモニー

サーフェスには明るい色合いを、プライマリにはベースカラーを、ホバーまたは押下状態には暗い濃淡を使用します。

別の色が必要ですか?

カラーピッカーに戻って画像をアップロードしたり、パレットを生成したり、新しい色の関係を探求したりできます。

カラーピッカーを開く