1.0.3

Full Changelog: 1.0.2...1.0.3

1.0.2

Full Changelog: 1.0.1...1.0.2

1.0.1

Full Changelog: 1.0.0...1.0.1

1.0.0

✨ Feature

Add option for data source

Full Changelog: 0.1.6...1.0.0

0.1.6

It is now possible to set the contrast threshold (contrastThreshold) for the color name output. Depends on the luminance, the text will be black or white.

Full Changelog: 0.1.5...0.1.6

0.1.5

Just updated front-end dependencies

Full Changelog: 0.1.4...0.1.5

0.1.4

✨ Features:

Save also ready to use custom properties

If the mode ist set to all (which is the default), the color picker don't store only the given value, it stores an array with following values:

• hex: The color in hex format
• oklch: The color in the [OKLCH] color space
• coords: The values in the [OKLCH] color space. This is great for any color transformation. Very handy if you use something like the [Tailwind OKLCH Plugin]
• customProperty: Ready to use custom properties for your CSS. You can set the name via the option customPropertyName, defaults to color

{
  "hex": "#65a30d",
  "oklch": "oklch(64.817% 0.17545 131.68)",
  "coords": {
    "l": 0.64817,
    "c": 0.17545,
    "h": 131.68
  },
  "customProperty": {
    "coords": "--color-l:0.64817;--color-c:0.17545;--color-h:131.68;",
    "oklch": "--color:oklch(64.817% 0.17545 131.68);",
    "hex": "--color:#65a30d;"
  }
}

Add Eel helper ColorConvert.toOkLch(color, precision, customPropertyName)

Converts a HEX color to the object who is used when you set the mode to all.

• color (string|array, required) The color
• precision (int) The precision for the color, defaults to 5
• customPropertyName (string) The name for the ready to use custom property, defaults to 'color'

Example:

${ColorConvert.toOkLch('#65a30d', 4, 'color-main')}

returns

{
  "hex": "#65a30d",
  "oklch": "oklch(64.82% 0.1755 131.7)",
  "coords": {
    "l": 0.6482,
    "c": 0.1755,
    "h": 131.7
  },
  "customProperty": {
    "coords": "--color-main-l:0.6482;--color-main-c:0.1755;--color-main-h:131.7;",
    "oklch": "--color-main:oklch(64.82% 0.1755 131.7);",
    "hex": "--color-main:#65a30d;"
  }
}

Full Changelog: 0.1.3...0.1.4

0.1.3

Reduce bundled size

Full Changelog: 0.1.2...0.1.3

0.1.2

✨ Show color names on collapsed picker

Full Changelog: 0.1.1...0.1.2

0.1.1

✨ Add an option to collapse the picker

There are now even more options on how the picker should look like:

Here you can see some of the combinations:

Full Changelog: 0.1.0...0.1.1