@markgorzynski/color-utils
Version:
The only color science library with adaptive visual perception modeling and accessibility-driven optimization.
170 lines (162 loc) • 5.54 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Utils - Documentation</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 2rem;
background: #f5f5f5;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
border-radius: 10px;
margin-bottom: 2rem;
text-align: center;
}
h1 {
margin: 0;
font-size: 2.5rem;
}
.subtitle {
opacity: 0.9;
margin-top: 0.5rem;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.card {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.card h2 {
color: #667eea;
margin-top: 0;
}
.card a {
display: inline-block;
margin-top: 1rem;
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.card a:hover {
text-decoration: underline;
}
.features {
background: white;
padding: 2rem;
border-radius: 8px;
margin: 2rem 0;
}
.features h2 {
color: #333;
}
.features ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
list-style: none;
padding: 0;
}
.features li {
padding-left: 1.5rem;
position: relative;
}
.features li:before {
content: "🎨";
position: absolute;
left: 0;
}
.links {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #ddd;
}
.links a {
display: inline-block;
margin: 0 1rem;
color: #667eea;
text-decoration: none;
}
code {
background: #f0f0f0;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<div class="header">
<h1>🎨 Color Utils</h1>
<p class="subtitle">Professional color science library with adaptive visual perception modeling</p>
</div>
<div class="features">
<h2>✨ Key Features</h2>
<ul>
<li><strong>Adaptive Oklab</strong> - Industry-first surround-aware color adaptation</li>
<li><strong>Chroma Control</strong> - WCAG-constrained color optimization</li>
<li><strong>CIECAM16</strong> - Complete color appearance modeling</li>
<li><strong>Wide Gamut</strong> - Display P3 and Rec. 2020 support</li>
<li><strong>CSS Level 4</strong> - Modern color syntax parsing</li>
<li><strong>TypeScript</strong> - Full type definitions included</li>
</ul>
</div>
<div class="cards">
<div class="card">
<h2>📖 API Reference</h2>
<p>Complete function documentation with examples and type definitions.</p>
<a href="API.html">View API Docs →</a>
</div>
<div class="card">
<h2>🔧 JSDoc Reference</h2>
<p>Auto-generated documentation from source code comments.</p>
<a href="api/index.html">Browse JSDoc →</a>
</div>
<div class="card">
<h2>🚀 Getting Started</h2>
<p>Installation and basic usage examples.</p>
<a href="https://github.com/markgorzynski/color-utils#readme">View README →</a>
</div>
<div class="card">
<h2>📦 NPM Package</h2>
<p>Install with: <code>npm install color-utils-adaptive</code></p>
<a href="https://www.npmjs.com/package/color-utils-adaptive">View on NPM →</a>
</div>
<div class="card">
<h2>💡 Examples</h2>
<p>Interactive examples demonstrating key features.</p>
<a href="https://github.com/markgorzynski/color-utils/tree/main/examples">View Examples →</a>
</div>
<div class="card">
<h2>🔄 Migration Guide</h2>
<p>Upgrading from legacy versions.</p>
<a href="https://github.com/markgorzynski/color-utils/blob/main/MIGRATION.md">View Guide →</a>
</div>
</div>
<div class="links">
<a href="https://github.com/markgorzynski/color-utils">GitHub</a>
<a href="https://github.com/markgorzynski/color-utils/issues">Issues</a>
<a href="https://github.com/markgorzynski/color-utils/blob/main/LICENSE">License</a>
</div>
</body>
</html>