Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub · AI
Colors
Build accessible color palettes with proper contrast ratios and semantic tokens.
skill openclawclawhub Free
Build accessible color palettes with proper contrast ratios and semantic tokens.
⬇ 0 downloads ★ 0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- ivangdavila
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Contrast Ratios (WCAG)
LevelNormal TextLarge Text (≥18pt or ≥14pt bold)UI ComponentsAA (minimum)≥ 4.5:1≥ 3:1≥ 3:1AAA (enhanced)≥ 7:1≥ 4.5:1— Critical thresholds on white background: #767676 → 4.54:1 ✅ barely passes #777777 → 4.47:1 ❌ fails (cannot round up) #757575 → 4.6:1 ✅ safe minimum gray Pure colors on white: Red #FF0000 → 4:1 ❌ fails for normal text Green #00FF00 → 1.4:1 ❌ always fails (never use for text) Blue #0000FF → 8.6:1 ✅ passes AAA
Color-Only Information
Never rely on color alone to convey meaning. 8% of men have color vision deficiency. <!-- ❌ Bad: only color differentiates states --> <span class="text-green-500">Active</span> <span class="text-red-500">Inactive</span> <!-- ✅ Good: icon + text + color --> <span class="text-green-500">✓ Active</span> <span class="text-red-500">✗ Inactive</span> Test designs in grayscale to verify information is still distinguishable.
Semantic Color Tokens
Three-layer architecture for maintainable palettes: /* Layer 1: Primitives (raw values) */ --blue-500: #3B82F6; --gray-900: #111827; /* Layer 2: Semantic (roles) */ --color-primary: var(--blue-500); --color-text: var(--gray-900); --color-error: var(--red-500); /* Layer 3: Component (specific use) */ --btn-primary-bg: var(--color-primary); --input-border-error: var(--color-error); Name tokens by function, not appearance: text-primary not text-blue.
Dark Mode
Create depth with luminosity, not shadows: /* Light mode uses shadows for depth */ /* Dark mode uses surface brightness */ --surface-0: hsl(220 15% 8%); /* page background */ --surface-1: hsl(220 15% 12%); /* card */ --surface-2: hsl(220 15% 16%); /* elevated element */ --surface-3: hsl(220 15% 20%); /* modal */ Avoid pure black #000 and pure white #FFF as backgrounds. Use #0a0a0a and #fafafa to reduce eye strain.
Neutral Grays
Add a subtle tint of your primary color to grays for cohesion: /* Instead of pure gray */ --gray-100: hsl(220 10% 96%); /* slight blue tint */ --gray-500: hsl(220 10% 46%); --gray-900: hsl(220 10% 10%); This creates a more polished, intentional palette.
HSL for Variations
HSL makes generating consistent color scales trivial: --primary-100: hsl(220 90% 95%); --primary-300: hsl(220 90% 75%); --primary-500: hsl(220 90% 55%); --primary-700: hsl(220 90% 35%); --primary-900: hsl(220 90% 15%); Same hue and saturation, only lightness changes.
Balance Rule
60-30-10 distribution: 60% dominant (backgrounds, containers) 30% secondary (cards, sections) 10% accent (CTAs, highlights) Limit palette to 3-5 colors plus neutrals. More creates visual noise.
Common Mistakes
text-gray-400 or lighter on white background typically fails contrast Primary/accent colors for body text cause eye fatigue—use for headings and CTAs only Hover states that only change opacity may fail contrast—change hue or lightness Purple-to-blue gradients are an AI cliché—choose intentional combinations Testing only light mode—dark mode often reveals contrast issues Red/green as only differentiator—use icons or text labels alongside
Safe Combinations
SectorPrimarySecondaryWhyFintechNavy #00246BLight Blue #CADCFCTrust + clarityHealthcareLight Blue #89ABE3WhiteCalm + cleanE-commerceRed #F96167Yellow #F9E795Urgency + optimism Avoid: red + green (colorblindness), adjacent hues (blue + purple), yellow + white (no contrast).
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md