How can I convert my custom Tailwind color to hexadecimal dynamically to be used in Chart.js?

[Nefcanto]

I'm using Chart.js and I want to apply a harmonious color theme on all of my UI elements. This includes charting.

I have this config in my tailwind.config.js:

    theme: {
        extend: {
            colors: {
                custom: {
                        color1: '#110A74',
                        color11: '#01073E',
                        color12: '#1D2253',
                        color13: '#879EAF',
                        color14: '#3C359F',
                        color2: '#EFEFEF',
                        color21: '#C5C5C5',
                        color22: '#4E4E4E',
                        color23: '#E6E6E6',
                        color24: '#A8A8A8',
                        color3: '#87241F',
                        color4: '#E2A90A',
                        color5: '#36A500',
                        color6: '#D1A06D',
                }
            }
        }
    },

And I use them like text-custom-color-4 or bg-custom-color-12 in my code.

Now I need to use them inside my Chart.js configuration scripts:

new Chart(
    document.getElementById(typeKey),
    {
        type: 'line',

        data: {
            labels: prices.value.map(price => useLocalizedTime({
                searchParams: searchParams,
                utcDate: price.utcDate,
            })),
            datasets: [
                {
                    label: 'Time ',
                    data: prices.value.map(price => price.amount),
                    borderColor: '#110A74',
                    backgroundColor: '#110A74',
                    fill: '-1'
                }
            ]
        },
        options: {
            scales: {
                y: {
                    stacked: true
                }
            },
            plugins: {
                filler: {
                    propagate: false
                },
                'samples-filler-analyser': {
                    target: 'chart-analyser'
                }
            },
            interaction: {
                intersect: false,
            },
        },
    }
)

As you can see, right now I have hardcoded some hexadecimal values there. How can I convert my custom colors to hexadecimal to be used there?

[wongjn]

Your colors already seem to be hexadecimal. You can use resolveConfig() to reference your configuration in JavaScript.

[Nefcanto]

@wongjn thank you for your answer. I even had a better solution. This is what I did in my barrel file:

import { config } from 'path-to-tailwind-from-your-barrel-file'

const customColors = config.theme.extend.colors.custom

export { customColors }

Now in my components, I can:

import { customColors } from 'base'

const color1 = customColors.color1

[Sowed]

Tailwindcss v4 makes it even easier since it allows you to access the color values in your javascript like

{
  data: prices.value.map(price => price.amount),
  borderColor: "var(--color-blue-500)", // This would be whatever color you have in your theme.
  backgroundColor: "var(--color-primary-500)",
  
}

Ref: Referencing in JavaScript