Tailwind Colors interpreted as Display P3 converted to sRGB

colors.swift

// Why?
// Figma (as of this writing) doesn't have color management
// As a result of this when using hex values intended for sRGB the colors end up much richer on a P3 display
// If you throw them into a color managed browser you're not going to get what you expect. It'll look washed out.
// This is a best approximation of the colors by interpeting as Display P3 and converting to sRGB
// Some colors are not fully representable (and are marked as such by noting which channels were clipped)

// h/t to Marc Edwards for pointing me in the right direction on how to do this. Thanks!

import Cocoa

// Tailwind colors 
let colors: [String] = [
    "22292f",
    "3d4852",
    "606f7b",
    "8795a1",
    "b8c2cc",
    "dae1e7",
    "f1f5f8",
    "f8fafc",
    "ffffff",

    "3b0d0c",
    "621b18",
    "cc1f1a",
    "e3342f",
    "ef5753",
    "f9acaa",
    "fcebea",

    "462a16",
    "613b1f",
    "de751f",
    "f6993f",
    "faad63",
    "fcd9b6",
    "fff5eb",

    "453411",
    "684f1d",
    "f2d024",
    "ffed4a",
    "fff382",
    "fff9c2",
    "fcfbeb",

    "0f2f21",
    "1a4731",
    "1f9d55",
    "38c172",
    "51d88a",
    "a2f5bf",
    "e3fcec",

    "0d3331",
    "20504f",
    "38a89d",
    "4dc0b5",
    "64d5ca",
    "a0f0ed",
    "e8fffe",

    "12283a",
    "1c3d5a",
    "2779bd",
    "3490dc",
    "6cb2eb",
    "bcdefa",
    "eff8ff",

    "191e38",
    "2f365f",
    "5661b3",
    "6574cd",
    "7886d7",
    "b2b7ff",
    "e6e8ff",

    "21183c",
    "382b5f",
    "794acf",
    "9561e2",
    "a779e9",
    "d6bbfc",
    "f3ebff",

    "451225",
    "6f213f",
    "eb5286",
    "f66d9b",
    "fa7ea8",
    "ffbbca",
    "ffebef",
]

extension NSColor {
    convenience init?(hex str: String) {
        guard let value = Int(str, radix: 16) else {
            return nil
        }

        self.init(
            displayP3Red:   CGFloat((value & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((value & 0x00FF00) >> 8) / 255.0,
            blue:  CGFloat((value & 0x0000FF) >> 0) / 255.0,
            alpha: 1.0
        )
    }

    var hexConversion: ((Int, Bool), (Int, Bool), (Int, Bool)) {
        let red = self.redComponent * 255
        let green = self.greenComponent * 255
        let blue = self.blueComponent * 255

        let didClipRed = red < 0.0 || red > 255.0
        let didClipGreen = green < 0.0 || green > 255.0
        let didClipBlue = blue < 0.0 || blue > 255.0

        return (
            (Int(red.rounded()).clamped(0, 255), didClipRed),
            (Int(green.rounded()).clamped(0, 255), didClipGreen),
            (Int(blue.rounded()).clamped(0, 255), didClipBlue)
        )
    }

    var hexString: String {
        let conversion = self.hexConversion

        let hex = String(format:"%06x", conversion.0.0 << 16 + conversion.1.0 << 8 + conversion.2.0)
        var clips: [String] = []

        if conversion.0.1 {
            clips.append("red")
        }

        if conversion.1.1 {
            clips.append("green")
        }

        if conversion.2.1 {
            clips.append("blue")
        }

        if clips.count > 0 {
            return "\(hex) (clipped: \(clips.joined(separator: ", ")))"
        }

        return hex
    }
}

func clamp<T: Comparable>(value: T, lower: T, upper: T) -> T {
    return min(max(value, lower), upper)
}

extension Int {
    func clamped(_ lower: Int, _ upper: Int) -> Int {
        return clamp(value: self, lower: lower, upper: upper)
    }
}

colors.forEach { p3Hex in
    let srgbHex = NSColor(hex: p3Hex)?.usingColorSpace(NSColorSpace.extendedSRGB)?.hexString

    print("\(p3Hex) -> \(srgbHex ?? "-")")
}

output.log

22292f -> 202930
3d4852 -> 3a4853
606f7b -> 5c707c
8795a1 -> 8496a2
b8c2cc -> b6c2cd
dae1e7 -> d8e1e8
f1f5f8 -> f0f5f8
f8fafc -> f8fafc
ffffff -> ffffff (clipped: green)
3b0d0c -> 410809
621b18 -> 6b1314
cc1f1a -> df0000 (clipped: green, blue)
e3342f -> f70b1f
ef5753 -> ff474b (clipped: red)
f9acaa -> ffa8a8 (clipped: red)
fcebea -> ffeaea (clipped: red)
462a16 -> 4b2811
613b1f -> 673918
de751f -> ee6e00 (clipped: blue)
f6993f -> ff931c (clipped: red)
faad63 -> ffa952 (clipped: red)
fcd9b6 -> ffd7b1 (clipped: red)
fff5eb -> fff5ea (clipped: red)
453411 -> 483308
684f1d -> 6d4e0f
f2d024 -> f9ce00 (clipped: blue)
ffed4a -> ffec00 (clipped: red, blue)
fff382 -> fff26e (clipped: red)
fff9c2 -> fff9bb (clipped: red)
fcfbeb -> fcfbe9
0f2f21 -> 003020 (clipped: red)
1a4731 -> 00482f (clipped: red)
1f9d55 -> 00a04c (clipped: red)
38c172 -> 00c469 (clipped: red)
51d88a -> 00dc82 (clipped: red)
a2f5bf -> 86f8ba
e3fcec -> ddfdeb
0d3331 -> 003431 (clipped: red)
20504f -> 005150 (clipped: red)
38a89d -> 00ab9d (clipped: red)
4dc0b5 -> 00c3b5 (clipped: red)
64d5ca -> 13d8ca
a0f0ed -> 85f3ee
e8fffe -> e2fffe (clipped: green)
12283a -> 09293c
1c3d5a -> 0c3e5d
2779bd -> 007bc3 (clipped: red)
3490dc -> 0092e2 (clipped: red)
6cb2eb -> 52b4f0
bcdefa -> b3dffd
eff8ff -> edf8ff (clipped: blue)
191e38 -> 181e3a
2f365f -> 2d3662
5661b3 -> 5361b9
6574cd -> 6175d3
7886d7 -> 7587dd
b2b7ff -> b1b7ff (clipped: blue)
e6e8ff -> e6e8ff (clipped: blue)
21183c -> 23183e
382b5f -> 3a2a62
794acf -> 8147d6
9561e2 -> 9e5eea
a779e9 -> af77f0
d6bbfc -> dbbaff (clipped: blue)
f3ebff -> f5ebff (clipped: blue)
451225 -> 4c0c25
6f213f -> 79183f
eb5286 -> ff4186
f66d9b -> ff619b (clipped: red)
fa7ea8 -> ff75a9 (clipped: red)
ffbbca -> ffb7ca (clipped: red)
ffebef -> ffeaef (clipped: red)