color-palette
✓単一のブランド ヘクスから完全でアクセス可能なカラー パレットを生成します。 11 シェード スケール (50 ～ 950)、セマンティック トークン (背景、前景、カード、ミュート)、およびダーク モードのバリアントを作成します。テキストのアクセシビリティのための WCAG コントラスト チェックが含まれています。 以下の場合に使用します: デザイン システムのセットアップ、Tailwind テーマの作成、単一ヘックスからのブランド カラーの構築、デザインからコードへの変換、色のアクセシビリティの確認。
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standard: Tailwind v4 @theme syntax
Use the reference files to generate shades, map semantics, and check contrast.
| 50 | 97% | Subtle backgrounds | | 100 | 94% | Hover states | | 200 | 87% | Borders, dividers | | 300 | 75% | Disabled states | | 400 | 62% | Placeholder text | | 500 | 48% | Brand color | | 600 | 40% | Primary actions | | 700 | 33% | Hover on primary | | 800 | 27% | Active states | | 900 | 20% | Text on light bg | | 950 | 10% | Darkest accents |
単一のブランド ヘクスから完全でアクセス可能なカラー パレットを生成します。 11 シェード スケール (50 ～ 950)、セマンティック トークン (背景、前景、カード、ミュート)、およびダーク モードのバリアントを作成します。テキストのアクセシビリティのための WCAG コントラスト チェックが含まれています。 以下の場合に使用します: デザイン システムのセットアップ、Tailwind テーマの作成、単一ヘックスからのブランド カラーの構築、デザインからコードへの変換、色のアクセシビリティの確認。 ソース: jezweb/claude-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jezweb/claude-skills --skill color-palette- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
color-palette とは？
単一のブランド ヘクスから完全でアクセス可能なカラー パレットを生成します。 11 シェード スケール (50 ～ 950)、セマンティック トークン (背景、前景、カード、ミュート)、およびダーク モードのバリアントを作成します。テキストのアクセシビリティのための WCAG コントラスト チェックが含まれています。 以下の場合に使用します: デザイン システムのセットアップ、Tailwind テーマの作成、単一ヘックスからのブランド カラーの構築、デザインからコードへの変換、色のアクセシビリティの確認。 ソース: jezweb/claude-skills。
color-palette のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jezweb/claude-skills --skill color-palette インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/jezweb/claude-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01