Design

グラデーション

定義された空間内で2色以上の色の間を滑らかに連続的に変化させる表現。

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

試してみる

パレットジェネレーター

補色、類似色、トライアド、スプリットコンプリメンタリー配色を使用して調和のとれたカラーパレットを生成します。

シェードジェネレーター

デザインシステム向けに、あらゆるベースカラーからTailwind CSSスタイルのシェードスケール（50～950）を生成します。

関連記事

カラーピッカーWebコンポーネントをゼロから構築する

アクセシブルなカラーピッカーをWebコンポーネントとして構築する。Canvasレンダリング、色相スライダー、アルファチャンネル、Shadow DOMを使ったカスタムイベントの実装方法を解説。

知覚的色空間：Lab、LCH、Oklab、OKLCH

知覚的に均一な色空間について探索します——CIE Lab、LCH、Oklab、OKLCH。それぞれがどのように設計されたか、どこで優れているか、およびCSSとデザイン作業で使用するものを学びます。

Next.js および Satori で楽観的なグラフ·イメージの生成

Next.js および Satori でダイナミック·オープンいただきました·グラフ·イメージの生成。グラデーション、ブランド色、レスポンシブ設計でカラー·認識 OG テンプレートの作成。

色分解とは何か：印刷用ファイルを準備する

CMYK 色分解、スポット色プレート、トラッピング、レジストレーション マークを理解します。正しい色分解で印刷対応ファイルを準備します。

Chainlinkのブランドカラー：オラクルブルーと六角形

Chainlinkの特徴的なブルー（#375BD2）と六角形のロゴシンボリズムを探索します。DeFiインフラストラクチャにおけるオラクルネットワークのブランディングが企業の信頼をどのように構築するかについて説明します。

Amazonブランドカラー：ブックストア茶色からスマイルオレンジへ

本屋の茶色からアイコニックなスマイルオレンジ(#FF9900)へのAmazonのブランドカラー進化をトレース。Prime blue、AWSカラー、およびサブブランドパレット。