🤗

ColorScheme.fromSeed チートシート

2022/12/16に公開約1,900字

ColorSceme fromSeed とは

seedColorを決めることで
seedColorを出発点とした、関連する色が構築されるシステムのことです。
https://colorscheme.enoiu.com/

構築されたこれらの色調パレットは、Material 3 Color Systemに基づいており、
ColorSchemeに必要なすべての色を提供します。
これらの色は、相性が良く、アクセシビリティのためのコントラスト要件を満たすように設計されています。
そのためサイトやアプリのデザインにおいて、より多彩な色を使用することを可能にします。

もちろん自身の気に入らない色や趣旨に合わない色をを自分で設定することもでき
関連する色のスキームを再生成し、自分の好きな色に変更することができます

設定できる色

主な色です。アプリケーションやウェブサイトで使用される基本的な色です。

primary:
onPrimary //primaryの文字色です。
primaryContainer //primaryの背景色です。
onPrimaryContainer //primaryContainerの文字色です。

第2色です   旧アクセントカラー

secondary:
onSecondary: //secondaryの文字色です。
secondaryContainer: //secondaryの背景色です。
onSecondaryContainer: //secondaryContainerの文字色です。

三番色?  secondaryに比べてさらに薄い色になることが多いそう

私は一回も使ったことはありません

tertiary:
onTertiary:tertiaryの文字色です。
tertiaryContainer:tertiaryの背景色です。
onTertiaryContainer:tertiaryContainerの文字色です。

エラー関係 または警告文などに使用されます

error:エラー表示のための赤色です。
onError:errorの文字色です。
errorContainer:errorの背景色です。
onErrorContainer:errorContainerの文字色です。

borderの色や背景色

outline:テキストボックスやボタンなどの見分けやすい縁取りの色です。
background:アプリケーションやウェブサイトの全体の背景色です。
onBackground:backgroundの文字色です。

背景の上に配置する色を決める(詳しくは↓)

surface:背景の上の重要な要素の色です。
onSurface:surfaceの文字色です。
surfaceVariant:surfaceをより深い色に変えたものです。
onSurfaceVariant:surfaceVariantの文字色です。
inverseSurface:surfaceを反転した色です。
onInverseSurface:inverseSurfaceの文字色です。

その他

inversePrimary:primaryを反転した色です。
shadow:オブジェクトを立体的に見せるための影の色です。
surfaceTint:surfaceを拡張するための色です。

backgroundとsurfaceの違い

backgroundとsurfaceは、Material Designのコンセプトの2つの要素です。
backgroundは背景色やテクスチャ
surfaceは背景の上に表示されるオブジェクトの色やテクスチャを表します

(画像あれば)
詳しく ↓
https://uidesign-dailylife.com/020-md-01-surfaces/

https://zenn.dev/enoiu/articles/5961d970bc3e1c#このアプリを作ったきっかけ

Discussion

ログインするとコメントできます