KASANE

Shopify Color Generator

One color, full scheme.
Generate a complete Shopify Horizon theme color palette instantly.

1. Brand Color

2. Background

settings_data.json
"scheme-kasane-custom": {
    "settings": {
      "background": "#FFFFFF",
      "foreground_heading": "#34282c",
      "foreground": "#34282cd9",
      "primary": "#DC9FB4",
      "primary_hover": "#d79aaf",
      "border": "#dc9fb433",
      "shadow": "#34282c1a",
      "primary_button_background": "#DC9FB4",
      "primary_button_text": "#121212",
      "primary_button_border": "#DC9FB4",
      "primary_button_hover_background": "#d79aaf",
      "primary_button_hover_text": "#121212",
      "primary_button_hover_border": "#d79aaf",
      "secondary_button_background": "transparent",
      "secondary_button_text": "#34282c",
      "secondary_button_border": "#a56b80",
      "secondary_button_hover_background": "#34282c0d",
      "secondary_button_hover_text": "#34282c",
      "secondary_button_hover_border": "#34282c",
      "input_background": "#FFFFFF",
      "input_text_color": "#34282c",
      "input_border_color": "#dc9fb433",
      "input_hover_background": "#F9F9F9",
      "variant_background_color": "transparent",
      "variant_text_color": "#34282c",
      "variant_border_color": "#dc9fb433",
      "variant_hover_background_color": "#34282c0d",
      "variant_hover_text_color": "#34282c",
      "variant_hover_border_color": "#dc9fb433",
      "selected_variant_background_color": "#DC9FB4",
      "selected_variant_text_color": "#121212",
      "selected_variant_border_color": "#DC9FB4",
      "selected_variant_hover_background_color": "#d79aaf",
      "selected_variant_hover_text_color": "#121212",
      "selected_variant_hover_border_color": "#d79aaf"
    }
  }

*Paste this snippet into settings_data.json inside the color_schemes object.
Don't forget to add a comma , between schemes if needed.

Free shipping on orders over ¥10,000.
KASANE
IMG
New Collection

Traditional Haori Jacket

¥32,000¥24,000
Size
-1+

Free shipping on orders over ¥10,000.
We ship worldwide from Japan.

About the Tool

Designed for Shopify merchants and developers using Horizon themes. Instead of manually adjusting over 30 color settings, simply define your Brand Color and Background. Our algorithm automatically calculates the perfect contrast for text, buttons, and borders.

Core Capabilities

  • • Smart Contrast Logic Automatically detects whether the background is light or dark and adjusts text and button colors to ensure perfect readability (WCAG compliant).
  • • Atmospheric Mixing Instead of pure black or white, the algorithm mixes a hint (5%) of your brand color into the text, creating a cohesive and professional atmosphere.
  • • Camouflage Avoidance If your background matches your brand color (e.g., for a header), buttons automatically invert to ensure they don't disappear.
  • • Ready for settings_data.json Outputs a valid JSON snippet that can be directly pasted into your theme's color_schemes object.

Workflow

  1. 01. Pick Brand Color

    Choose your primary brand color. This will be used for buttons, links, and accents throughout the scheme.

  2. 02. Select Background

    Choose "White" for product pages, "Brand Color" for headers, or "Dark" for footers. The tool re-calculates everything instantly.

  3. 03. Copy & Apply

    Copy the JSON snippet and paste it into your Shopify theme code (config/settings_data.json).

Pro Tip

"Create multiple schemes for different sections. We recommend generating a scheme with a White Background for content areas and one with a Brand Background for headers to create rhythm in your store design."