Color Pickers
Swatch grids, hex inputs, gradient pickers and theme color selectors.
Swatch Grid Picker
Brand color
#1E3A8A
<div class="uk-color-picker">
<div class="uk-color-picker-header">
<div class="uk-color-picker-label">Brand color</div>
<div class="uk-color-picker-value">
<span class="uk-color-picker-chip" style="background:#1e3a8a;"></span>
<span class="uk-color-picker-hex">#1E3A8A</span>
</div>
</div>
<div class="uk-color-swatches">
<button type="button" class="uk-color-swatch" style="background:#1e3a8a;" data-color="#1E3A8A" aria-label="Navy"></button>
<button type="button" class="uk-color-swatch" style="background:#3b82f6;" data-color="#3B82F6" aria-label="Blue"></button>
<button type="button" class="uk-color-swatch uk-color-swatch-active" style="background:#0ea5e9;" data-color="#0EA5E9" aria-label="Sky"></button>
<!-- ... more swatches -->
</div>
</div>
<style>
.uk-color-picker {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
text-align: left;
}
.uk-color-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.uk-color-picker-label {
font-size: 0.85rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-color-picker-value {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.3rem 0.6rem;
}
.uk-color-picker-chip {
width: 16px;
height: 16px;
border-radius: 0.25rem;
border: 1px solid rgba(0,0,0,0.08);
flex-shrink: 0;
}
.uk-color-picker-hex {
font-size: 0.72rem;
font-weight: 700;
color: #334155;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.02em;
}
.uk-color-swatches {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem;
}
.uk-color-swatch {
aspect-ratio: 1;
border-radius: 0.5rem;
border: 1px solid rgba(0,0,0,0.06);
cursor: pointer;
padding: 0;
transition: transform 0.15s, box-shadow 0.15s;
position: relative;
}
.uk-color-swatch:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(15,23,42,0.15);
}
.uk-color-swatch-active {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e3a8a;
}
.uk-color-swatch-active::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
@media (max-width: 480px) {
.uk-color-swatches { grid-template-columns: repeat(6, 1fr); }
.uk-color-picker { padding: 1rem; }
}
</style>
Native Color Input
Primary button preview
<div class="uk-color-native">
<label class="uk-color-native-label" for="uk-native-color">Accent color</label>
<div class="uk-color-native-row">
<input type="color" id="uk-native-color" class="uk-color-native-input" value="#3b82f6">
<input type="text" class="uk-color-native-text" value="#3B82F6" aria-label="Hex value">
<button type="button" class="uk-color-native-reset" aria-label="Reset color">
<i class="fas fa-rotate-left"></i>
</button>
</div>
<div class="uk-color-native-preview">
<span class="uk-color-native-preview-dot"></span>
<span class="uk-color-native-preview-text">Primary button preview</span>
</div>
</div>
<style>
.uk-color-native {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
text-align: left;
}
.uk-color-native-label {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-color-native-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.uk-color-native-input {
width: 48px;
height: 42px;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #fff;
cursor: pointer;
flex-shrink: 0;
}
.uk-color-native-input::-webkit-color-swatch-wrapper { padding: 4px; }
.uk-color-native-input::-webkit-color-swatch {
border: none;
border-radius: 0.3rem;
}
.uk-color-native-input::-moz-color-swatch {
border: none;
border-radius: 0.3rem;
}
.uk-color-native-text {
flex: 1;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.6rem 0.75rem;
font-size: 0.8rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 600;
color: #334155;
outline: none;
transition: all 0.15s;
}
.uk-color-native-text:focus {
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.uk-color-native-reset {
width: 42px;
height: 42px;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
transition: all 0.15s;
flex-shrink: 0;
}
.uk-color-native-reset:hover {
background: #f1f5f9;
color: #1e3a8a;
}
.uk-color-native-preview {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.75rem 1rem;
border-radius: 0.6rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.uk-color-native-preview-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: #3b82f6;
flex-shrink: 0;
}
.uk-color-native-preview-text {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
}
</style>
Tonal Palette
Color palette
Click a shade to copy its hex
Navy
Emerald
<div class="uk-color-tonal">
<div class="uk-color-tonal-header">
<div class="uk-color-tonal-title">Color palette</div>
<div class="uk-color-tonal-sub">Click a shade to copy its hex</div>
</div>
<div class="uk-color-tonal-row">
<div class="uk-color-tonal-name">Navy</div>
<div class="uk-color-tonal-shades">
<button type="button" class="uk-color-tonal-shade" style="background:#e0e7ff;color:#0b1b2f;" data-color="#E0E7FF">50</button>
<button type="button" class="uk-color-tonal-shade" style="background:#c7d2fe;color:#0b1b2f;" data-color="#C7D2FE">100</button>
<button type="button" class="uk-color-tonal-shade" style="background:#a5b4fc;color:#0b1b2f;" data-color="#A5B4FC">200</button>
<button type="button" class="uk-color-tonal-shade" style="background:#818cf8;color:#fff;" data-color="#818CF8">300</button>
<button type="button" class="uk-color-tonal-shade" style="background:#6366f1;color:#fff;" data-color="#6366F1">400</button>
<button type="button" class="uk-color-tonal-shade uk-color-tonal-shade-active" style="background:#3b82f6;color:#fff;" data-color="#3B82F6">500</button>
<button type="button" class="uk-color-tonal-shade" style="background:#2563eb;color:#fff;" data-color="#2563EB">600</button>
<button type="button" class="uk-color-tonal-shade" style="background:#1d4ed8;color:#fff;" data-color="#1D4ED8">700</button>
<button type="button" class="uk-color-tonal-shade" style="background:#1e3a8a;color:#fff;" data-color="#1E3A8A">800</button>
<button type="button" class="uk-color-tonal-shade" style="background:#172554;color:#fff;" data-color="#172554">900</button>
</div>
</div>
<!-- ... repeat for Emerald -->
</div>
<style>
.uk-color-tonal {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
text-align: left;
}
.uk-color-tonal-header {
margin-bottom: 1rem;
}
.uk-color-tonal-title {
font-size: 0.9rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-color-tonal-sub {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 0.15rem;
}
.uk-color-tonal-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.uk-color-tonal-row:last-child { margin-bottom: 0; }
.uk-color-tonal-name {
width: 70px;
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 700;
color: #475569;
}
.uk-color-tonal-shades {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 0.25rem;
flex: 1;
}
.uk-color-tonal-shade {
aspect-ratio: 1;
border: none;
border-radius: 0.35rem;
cursor: pointer;
font-size: 0.55rem;
font-weight: 800;
padding: 0;
transition: transform 0.15s, box-shadow 0.15s;
position: relative;
}
.uk-color-tonal-shade:hover {
transform: scale(1.12);
z-index: 1;
box-shadow: 0 4px 10px rgba(15,23,42,0.2);
}
.uk-color-tonal-shade-active {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0b1b2f;
}
@media (max-width: 480px) {
.uk-color-tonal-row { flex-direction: column; align-items: flex-start; }
.uk-color-tonal-name { width: auto; }
.uk-color-tonal-shades { width: 100%; grid-template-columns: repeat(5, 1fr); }
}
</style>
Inline Color Field
Used for tags, labels, and chart accents.
<div class="uk-color-field">
<label class="uk-color-field-label" for="uk-field-color">Label color</label>
<div class="uk-color-field-control">
<span class="uk-color-field-preview" style="background:#8b5cf6;"></span>
<input type="text" id="uk-field-color" class="uk-color-field-input" value="#8B5CF6">
<label class="uk-color-field-btn" aria-label="Pick color">
<i class="fas fa-eye-dropper"></i>
<input type="color" class="uk-color-field-native" value="#8b5cf6">
</label>
</div>
<div class="uk-color-field-hint">Used for tags, labels, and chart accents.</div>
</div>
<style>
.uk-color-field {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
text-align: left;
}
.uk-color-field-label {
display: block;
font-size: 0.82rem;
font-weight: 700;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-color-field-control {
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 0.6rem;
padding: 0.35rem 0.5rem 0.35rem 0.6rem;
background: #fff;
transition: all 0.15s;
}
.uk-color-field-control:focus-within {
border-color: #93c5fd;
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.uk-color-field-preview {
width: 28px;
height: 28px;
border-radius: 0.4rem;
border: 1px solid rgba(0,0,0,0.06);
flex-shrink: 0;
}
.uk-color-field-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.82rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 600;
color: #334155;
min-width: 0;
}
.uk-color-field-btn {
width: 32px;
height: 32px;
border-radius: 0.4rem;
background: #f1f5f9;
color: #475569;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
transition: all 0.15s;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.uk-color-field-btn:hover {
background: #e2e8f0;
color: #1e3a8a;
}
.uk-color-field-native {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.uk-color-field-hint {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 0.5rem;
}
</style>