Color Picker

Component

Interactive examples and API documentation

Basic
Basic color picker with a clear button.
Default
With Text
With Clear Button
Disabled
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Default
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_default",
      value: "#1677ff"
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      With Text
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_with_text",
      value: "#1677ff",
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      With Clear Button
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_clearable",
      value: "#52c41a",
      allow_clear: true,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Disabled
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_disabled",
      value: "#ff4d4f",
      disabled: true
    ) %>
  <% end %>
<% end %>
Presets
Preset grid for quick selections.
Default Presets (12 recommended colors)
Custom Presets (Array)
Grouped Presets
Default + Custom Presets
No Presets
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Default Presets (12 recommended colors)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_default_presets",
      value: "#1677ff",
      show_preset_colors: true,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Custom Presets (Array)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_custom_array",
      value: "#9254de",
      show_preset_colors: false,
      presets: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Grouped Presets
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_grouped_presets",
      value: "#1677ff",
      show_preset_colors: false,
      presets: [
        { label: "Brand", colors: ["#1677ff", "#0050b3", "#003a8c"] },
        { label: "Success", colors: ["#52c41a", "#237804", "#135200"] },
        { label: "Warning", colors: ["#faad14", "#d48806", "#ad6800"] },
        { label: "Error", colors: ["#ff4d4f", "#cf1322", "#a8071a"] }
      ],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Default + Custom Presets
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_combined_presets",
      value: "#722ed1",
      show_preset_colors: true,
      presets: [
        { label: "My Colors", colors: ["#722ed1", "#531dab", "#391085"] }
      ],
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      No Presets
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_no_presets",
      value: "#fa8c16",
      show_preset_colors: false,
      show_text: true
    ) %>
  <% end %>
<% end %>
Sizes
Small, default, and large trigger sizes.
Small (24px)
Middle (32px)
Large (40px)
Code 
<%= render HakumiComponents::Space::Component.new(size: :large, align: :start) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
          Small (24px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "color_small",
          value: "#722ed1",
          size: :small,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
          Middle (32px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "color_middle",
          value: "#1677ff",
          size: :default,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :small) do |inner_space| %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
          Large (40px)
        <% end %>
      <% end %>
      <% inner_space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "color_large",
          value: "#52c41a",
          size: :large,
          show_text: true
        ) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
Formats
Color format options: HEX, RGB, HSL.
HEX Only (no format selector)
RGB Only (no format selector)
HSL Only (no format selector)
All Formats (with format selector)
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      HEX Only (no format selector)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_hex",
      value: "#1677ff",
      format: :hex,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      RGB Only (no format selector)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_rgb",
      value: "rgb(22, 119, 255)",
      format: :rgb,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      HSL Only (no format selector)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_hsl",
      value: "hsl(215, 100%, 55%)",
      format: :hsl,
      show_format_select: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      All Formats (with format selector)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_all_formats",
      value: "#1677ff",
      format: :hex,
      show_format_select: true,
      show_text: true
    ) %>
  <% end %>
<% end %>
Alpha
RGBA, HSLA, and HEX alpha value examples.
With Alpha (RGBA)
Without Alpha (RGB)
HEX with Alpha (#RRGGBBAA)
HSLA (Hue, Saturation, Lightness, Alpha)
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      With Alpha (RGBA)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_rgba",
      value: "rgba(22, 119, 255, 0.5)",
      format: :rgb,
      show_format_select: false,
      disabled_alpha: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Without Alpha (RGB)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_rgb_no_alpha",
      value: "rgb(82, 196, 26)",
      format: :rgb,
      show_format_select: false,
      disabled_alpha: true,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      HEX with Alpha (#RRGGBBAA)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_hex_alpha",
      value: "#1677ff80",
      format: :hex,
      show_format_select: false,
      disabled_alpha: false,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      HSLA (Hue, Saturation, Lightness, Alpha)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_hsla",
      value: "hsla(215, 100%, 55%, 0.7)",
      format: :hsl,
      show_format_select: false,
      disabled_alpha: false,
      show_text: true
    ) %>
  <% end %>
<% end %>
Trigger Modes
Open the panel on click or hover.
Click to Open (default)
Hover to Open
Code 
<%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Click to Open (default)
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_click",
      value: "#1677ff",
      trigger: :click,
      show_text: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>
      Hover to Open
    <% end %>
    <%= render HakumiComponents::ColorPicker::Component.new(
      name: "color_hover",
      value: "#52c41a",
      trigger: :hover,
      show_text: true
    ) %>
  <% end %>
<% end %>
Form Integration
Color pickers rendered through HakumiComponents::FormBuilder.
The main brand color for your application
Used for success states and positive actions
Used for warning states and caution messages
Used for error states and destructive actions
Background color with transparency support
Code 
<%= form_with url: "#", method: :post, builder: HakumiComponents::FormBuilder do |f| %>
  <%= render HakumiComponents::Card::Component.new(title: "Theme Configuration", html_attributes: { style: "max-width: 600px;" }) do %>
    <%= render HakumiComponents::Space::Component.new(direction: :vertical, size: :large, block: true) do |space| %>
      <% space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "theme[primary_color]",
          label: "Primary Color",
          caption: "The main brand color for your application",
          value: "#1677ff",
          format: :hex,
          show_format_select: false,
          show_text: true,
          standalone: false
        ) %>
      <% end %>

      <% space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "theme[success_color]",
          label: "Success Color",
          caption: "Used for success states and positive actions",
          value: "#52c41a",
          format: :hex,
          show_format_select: false,
          show_text: true,
          standalone: false
        ) %>
      <% end %>

      <% space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "theme[warning_color]",
          label: "Warning Color",
          caption: "Used for warning states and caution messages",
          value: "#faad14",
          format: :hex,
          show_format_select: false,
          show_text: true,
          standalone: false
        ) %>
      <% end %>

      <% space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "theme[error_color]",
          label: "Error Color",
          caption: "Used for error states and destructive actions",
          value: "#ff4d4f",
          format: :hex,
          show_format_select: false,
          show_text: true,
          standalone: false
        ) %>
      <% end %>

      <% space.with_item do %>
        <%= render HakumiComponents::ColorPicker::Component.new(
          name: "theme[background_color]",
          label: "Background Color (with Alpha)",
          caption: "Background color with transparency support",
          value: "rgba(255, 255, 255, 0.95)",
          format: :rgb,
          show_format_select: false,
          disabled_alpha: false,
          show_text: true,
          standalone: false
        ) %>
      <% end %>

      <% space.with_item do %>
        <%= render HakumiComponents::Space::Component.new(size: :small, justify: :end) do |button_space| %>
          <% button_space.with_item do %>
            <%= render HakumiComponents::Button::Component.new(html_type: :reset) do %>
              Reset
            <% end %>
          <% end %>
          <% button_space.with_item do %>
            <%= render HakumiComponents::Button::Component.new(type: :primary, html_type: :submit) do %>
              Save Theme
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>
JavaScript API
Control the picker value, format, and panel state from JavaScript.

Color Picker with JavaScript API

Click buttons to interact with the color picker
Code 
<div style="max-width: 600px;">
  <div class="hakumi-space" style="gap: 16px; flex-direction: column;">
    <div>
      <p style="margin-bottom: 8px; color: var(--color-text-secondary); font-size: 12px;">
        Color Picker with JavaScript API
      </p>
      <%= render HakumiComponents::ColorPicker::Component.new(
        id: "api-color-picker",
        name: "color_api",
        value: "#1677ff",
        show_text: true,
        allow_clear: true
      ) %>
    </div>

    <div class="hakumi-space" style="gap: 8px; flex-wrap: wrap;">
      <%= render HakumiComponents::Button::Component.new(
        type: :primary,
        size: :small,
        onclick: "setColor('#ff4d4f')"
      ) do %>
        Set Red
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :primary,
        size: :small,
        onclick: "setColor('#52c41a')"
      ) do %>
        Set Green
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :primary,
        size: :small,
        onclick: "setColor('#1677ff')"
      ) do %>
        Set Blue
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :default,
        size: :small,
        onclick: "getColor()"
      ) do %>
        Get Color
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :default,
        size: :small,
        onclick: "togglePanel()"
      ) do %>
        Toggle Panel
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :default,
        size: :small,
        onclick: "changeFormat('rgb')"
      ) do %>
        RGB Format
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :default,
        size: :small,
        onclick: "changeFormat('hsl')"
      ) do %>
        HSL Format
      <% end %>

      <%= render HakumiComponents::Button::Component.new(
        type: :dashed,
        size: :small,
        onclick: "clearColor()"
      ) do %>
        Clear
      <% end %>
    </div>

    <div id="api-output" style="padding: 12px; border-radius: 6px; background: var(--color-bg-layout); font-family: monospace; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary);">
      Click buttons to interact with the color picker
    </div>
  </div>
</div>

<script>
  const picker = document.getElementById('api-color-picker');
  const output = document.getElementById('api-output');

  function setColor(color) {
    picker.hakumiComponent?.api.setValue(color);
    output.textContent = `Set color to: ${color}`;
  }

  function getColor() {
    const color = picker.hakumiComponent?.api.getValue();
    const hsv = picker.hakumiComponent?.api.getHSV();
    const alpha = picker.hakumiComponent?.api.getAlpha();
    output.textContent = `Current color: ${color}\nHSV: h=${hsv.h}, s=${hsv.s}, v=${hsv.v}\nAlpha: ${alpha}`;
  }

  function togglePanel() {
    picker.hakumiComponent?.api.toggle();
    output.textContent = 'Toggled panel';
  }

  function changeFormat(format) {
    picker.hakumiComponent?.api.setFormat(format);
    const color = picker.hakumiComponent?.api.getValue();
    output.textContent = `Changed format to ${format}: ${color}`;
  }

  function clearColor() {
    picker.hakumiComponent?.api.clear();
    output.textContent = 'Color cleared';
  }

  // Listen to change events
  picker.addEventListener('hakumi--color-picker:change', (e) => {
    console.log('Color changed:', e.detail);
  });

  picker.addEventListener('hakumi--color-picker:openChange', (e) => {
    console.log('Panel', e.detail.open ? 'opened' : 'closed');
  });
</script>
Disabled
Disabled state without trigger text.
Code 
<div style="max-width: 240px;">
  <%= render HakumiComponents::ColorPicker::Component.new(
    name: "color_disabled",
    value: "#f5222d",
    disabled: true,
    show_text: false
  ) %>
</div>

ColorPicker Props

Prop Type Default Description
value String - Current color value.
default_value String - Initial color when value is nil.
format Symbol :hex Input format (:hex, :rgb, :hsl).
show_text Boolean false Show the color value in the trigger.
disabled Boolean false Disable the picker.
disabled_alpha Boolean false Disable alpha channel controls.
allow_clear Boolean false Show clear button in trigger.
presets Array or Hash [] Preset color groups.
size Symbol :default Size variant (:small, :default, :large).
trigger Symbol :click Open trigger (:click, :hover).
name String or Symbol auto Hidden input name/id.
label String - Label text when used in forms.
caption String - Caption text below the control.
errors Array[String] or String [] Error messages.
standalone Boolean true Render without FormItem wrapper.
**html_attrs Keyword args - Additional HTML attributes for the wrapper.

I18n Keys

The component uses Rails I18n for preset labels. Override via I18n config with scope hakumi_components.color_picker.
Prop Type Default Description
default_preset_label String "Recommended" Default label for unnamed preset groups.
presets_label String "Presets" Header label for the presets section.

ColorPicker JavaScript API (element.hakumiComponent.api)

Access via element.hakumiComponent.api or HakumiComponents.get(element.id).
Prop Type Default Description
getValue() Method - Return current color value.
setValue(value) Method - Set the current color value.
open() Method - Open the panel.
close() Method - Close the panel.
toggle() Method - Toggle the panel.
clear() Method - Clear the selected value.
getFormat() Method - Return current input format.
setFormat(format) Method - Update the input format when the format selector is enabled.
getHSV() Method - Return a copy of the current HSV color state.
getAlpha() Method - Return the current alpha value.