Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Color picker

A saturation and brightness area, hue and opacity sliders, a hex, rgb or oklch field, swatches and the eyedropper where the browser has one, over a native color input. Needs monsoon.js.

Interactive18 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-color-picker

Options

OptionDescription
data-m-color-picker-format="oklch" (hex, rgb or oklch, also what the input stores)
data-m-color-picker-swatches="#4f46e5,#0ea5e9"
data-m-color-picker-alpha="false"
data-m-color-picker-inline

Methods

MethodDescription
Monsoon.colorPicker(el).value
Monsoon.colorPicker(el).value = "oklch(70% 0.15 200)"
Monsoon.colorPicker(el).rgba
Monsoon.colorPicker(el).open()

Events

EventDescription
monsoon:change { value, hex, rgba }
input and change on the native input

Classes

18 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the color picker. On a <div> in the example. Sets inline-flex display, static position, stacking order, shadow and animation, and --tone and --_checker.
CSS
.color-picker[data-inline] > .color-picker-panel {
  position: static;
  z-index: auto;
  box-shadow: var(--m-shadow-xs);
  animation: none;
}

.color-picker {
  --tone: var(--primary);
  --_checker: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / .5rem .5rem;
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets inline-flex display, alignment, gap, height, padding and text size.
CSS
.color-picker-trigger:hover {
  border-color: color-mix(in oklab, var(--border), var(--foreground) 30%);
}

.color-picker-trigger:focus-visible,
.color-picker-area:focus-visible,
.color-picker-swatch:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets width, background, corner radius and shadow.
CSS
.color-picker-chip, .color-picker-preview {
  width: calc(var(--field-h, var(--m-control-h-md)) - .75rem);
  aspect-ratio: 1;
  background: linear-gradient(var(--color-picker-color), var(--color-picker-color)), var(--_checker);
  border-radius: calc(var(--field-radius, var(--m-radius-md)) - .25rem);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets width and text style.
CSS
.color-picker-value {
  min-width: 4.5rem;
  text-align: start;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets fixed position, offsets, stacking order, margin, padding and overflow, and --tone and --tone-fg.
CSS
.color-picker-panel:popover-open {
  display: grid;
}

.color-picker-panel:not([popover]) {
  display: grid;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets border, height, background, corner radius, shadow and crosshair cursor.
CSS
.color-picker-area > .color-picker-thumb {
  top: var(--color-picker-y);
  left: var(--color-picker-x);
}

.color-picker-trigger:focus-visible,
.color-picker-area:focus-visible,
.color-picker-swatch:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets absolute position, offsets, width, height, background and border.
CSS
.color-picker-thumb {
  position: absolute;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--color-picker-solid);
  border: 2px solid oklch(1 0 0);
  border-radius: 50%;
  box-shadow: 0 0 0 1px oklch(0 0 0 / .25), var(--m-shadow-sm);
  translate: -50% -50%;
  pointer-events: none;
}

.color-picker-alpha > .color-picker-thumb {
  left: var(--color-picker-a);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets flex display, alignment and gap.
CSS
.color-picker-row {
  display: flex;
  align-items: center;
  gap: .625rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets alignment, grid display and gap.
CSS
.color-picker-sliders {
  flex: 1;
  display: grid;
  gap: .75rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets offsets, background, height, corner radius, shadow and pointer cursor.
CSS
.color-picker-hue:focus-visible, .color-picker-alpha:focus-visible {
  outline: 0;
}

.color-picker-hue {
  background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets offsets, height, corner radius, shadow, pointer cursor and background.
CSS
.color-picker-alpha > .color-picker-thumb {
  left: var(--color-picker-a);
}

.color-picker-hue:focus-visible, .color-picker-alpha:focus-visible {
  outline: 0;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets width, background, corner radius and shadow.
CSS
.color-picker-preview {
  width: 2.25rem;
  border-radius: var(--m-radius-md);
}

.color-picker-chip, .color-picker-preview {
  width: calc(var(--field-h, var(--m-control-h-md)) - .75rem);
  aspect-ratio: 1;
  background: linear-gradient(var(--color-picker-color), var(--color-picker-color)), var(--_checker);
  border-radius: calc(var(--field-radius, var(--m-radius-md)) - .25rem);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 14%, transparent);
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets generated content, width, height and background.
CSS
.color-picker-eyedropper::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask: var(--m-ix-pipette) center / contain no-repeat;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets flex display and gap.
CSS
.color-picker-fields {
  display: flex;
  gap: .5rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets alignment.
CSS
.color-picker-format {
  flex: 0 0 5rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets alignment, width and text size.
CSS
.color-picker-text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets grid display, grid tracks and gap.
CSS
.color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .375rem;
}
Modifier Modifier, combined with the color-picker class. Not used in the example above. Sets border, background, corner radius, shadow, pointer cursor and transition.
CSS
.color-picker-swatch:hover {
  scale: 1.12;
}

.color-picker-trigger:focus-visible,
.color-picker-area:focus-visible,
.color-picker-swatch:focus-visible {
  outline: var(--m-ring);
  outline-offset: var(--m-ring-offset);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Color picker: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-start gap-6">
  <div class="color-picker" data-m-color-picker data-m-color-picker-swatches="#4f46e5,#0ea5e9,#10b981,#f59e0b,#ef4444,#ec4899,#64748b,#0f172a">
    <input type="color" class="color-input" name="brand" value="#4f46e5" aria-label="Brand color">
  </div>
  <div class="color-picker" data-m-color-picker data-m-color-picker-inline data-m-color-picker-format="oklch">
    <input type="color" class="color-input" value="#0ea5e9" aria-label="Accent color">
  </div>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
FormsColor inputA native color picker shown as a rounded swatch.Two factor and sign inMethod pickerSecond factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.InteractiveKanban boardSortable lists that share a group become kanban columns: drag cards between them, or pick one up with Space and move it to the next column with the left and right arrows. Column counts update on drop. Needs monsoon.js.InteractiveDual range sliderTwo thumbs for a minimum and a maximum over two native range inputs, which keep the values for the form. Steps, a minimum gap, formatted tooltips and the WAI-ARIA slider keys. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.