Heatmap colors a different shade than colors I have specified?

[ShaneMelaugh]

I am making a heatmap, and giving it the following for coloring:

    chart: {
    width: '100%',
    type: "heatmap",
    foreColor: '#000000',
    title: {
        text: 'title'
    }},
    fill: {
        type: "solid",
    },
    plotOptions: {
        heatmap: {
            shadeIntensity: 1,
            radius: 0,
            useFillColorAsStroke: true,
            colorScale: {
                ranges: [
                            {
                                from: 1,
                                to: 250,
                                name: '1 - 250',
                                color: '#0b1e33'
                            },
                            {
                                from: 251,
                                to: 500,
                                name: '251 -500',
                                color: '#013c58'
                            },
                            {
                                from: 501,
                                to: 750,
                                name: '501 - 750',
                                color: '#00537a'
                            },
                            {
                                from: 751,
                                to: 1000,
                                name: '751 - 1000',
                                color: '#ffba42'
                            },
                            {
                                from: 1001,
                                to: 10000,
                                name: '1000 +',
                                color: '#f5a201'
                            }
                        ]
                    }
                }
            }

While the range is the exact color, the squares in the heatmap are a lighter shade which I dont want. I've looked through the documentation and can't see where i'm going wrong. Can anybody help?