Using a valid value

The component check if the value is a css variable (starting with '--'), if not check validity with CSS.supports API

#AA66DD

<color-block>#AA66DD</color-block>

blue

<color-block><span class="custom-color-text-display">blue</span></color-block>

hsl(9,100%,64%)

<color-block>hsl(9,100%,64%)</color-block>

rgba(255,99,71,0.5)

<color-block>rgba(255,99,71,0.5)</color-block>

Using a invalid value

If you are using an invalid value, the color block will show a red cross. You'll still be able to copy the (wrong) value.

ABCD

<color-block>ABCD</color-block>

<color-block></color-block>

Options

color-after-text

You can choose to display the color block after the value.

#AA66DD

<color-block color-after-text="true">#AA66DD</color-block>

Global configuration

You can globally configure the web-component, so you don't have to do it manually everywhere.

Here is the current state of this configuration object, you can override anything you want.

window.ColorBlockConfiguration = {
    clipboard: {
        validColorTitle: (value) => `click to copy value ${value}`,
        invalidColorTitle: (value) => `${value} is an invalid color - click to copy value`
    }
}

User actions

Title

When mouse is over the block, a message is displayed to inform the user

Copy to clipboard

You can copy the value by left-clicking on the color block. A little checkmark appears if the copy succeeded, else it'll be a red cross.

Use it in your project

Install it

npm install color-block --save

Any kind of import will automatically declare the web-component, nothing to do.

Import module

You can simply import the module in your root app module

import 'color-block';

Import script in your <head>

Import js file (minified or not) in <head>

<head>
    ...
    <script type="module" src="node_modules/color-block/dist/color-block.js"></script>
    ...
</head>

<body>
    ...
    <color-block color-after-text="true">#AA66DD</color-block>
    ...
</body>