@terrazzo/react-color-picker/dist/lib/oklab.d.ts

React color picker that supports Color Module 4, wide color gamut (WCG), and Display-P3 using WebGL for monitor-accurate colors. Powered by Culori.

/**
 * Björn Ottosson’s open source implementation of Oklab.
 * @warning Requires loading `./rgb.js` first to use!
 */
export declare const OKLAB = "float cbrt(float x) {\n  return sign(x) * pow(abs(x), 1.0 / 3.0);\n}\n\nvec4 lab_to_lch(vec4 lab) {\n  float chroma = sqrt(lab.y * lab.y + lab.z * lab.z);\n  float hue = abs(lab.y) > 0.00001 && abs(lab.z) > 0.00001 ? degrees(atan(lab.z, lab.y)) : 0.0;\n  if (hue < 0.0) hue += 360.0;\n  return vec4(lab.x, chroma, hue, lab.w);\n}\n\nvec4 lch_to_lab(vec4 lch) {\n  // return black if lightness is sufficiently dark\n  if (lch.x < 0.00001) {\n    return vec4(0.0, 0.0, 0.0, lch.w);\n  }\n\n  return vec4(\n    lch.x,\n    lch.y * cos(radians(lch.z)),\n    lch.y * sin(radians(lch.z)),\n    lch.w\n  );\n}\n\nvec4 oklab_to_linear_rgb(vec4 oklab) {\n  float l = pow(oklab.x + 0.3963377774 * oklab.y + 0.2158037573 * oklab.z, 3.0);\n  float m = pow(oklab.x - 0.1055613458 * oklab.y - 0.0638541728 * oklab.z, 3.0);\n  float s = pow(oklab.x - 0.0894841775 * oklab.y - 1.2914855480 * oklab.z, 3.0);\n\n  return vec4(\n    +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,\n    oklab.w\n  );\n}\n\nvec4 linear_rgb_to_oklab(vec4 srgb) {\n  float l = cbrt(0.4122214708 * srgb.x + 0.5363325363 * srgb.y + 0.0514459929 * srgb.z);\n  float m = cbrt(0.2119034982 * srgb.x + 0.6806995451 * srgb.y + 0.1073969566 * srgb.z);\n  float s = cbrt(0.0883024619 * srgb.x + 0.2817188376 * srgb.y + 0.6299787005 * srgb.z);\n\n  return vec4(\n    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,\n    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,\n    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,\n    srgb.w\n  );\n}\n\n// Finds the maximum saturation possible for a given hue that fits in sRGB\n// Saturation here is defined as S = C/L\n// a and b must be normalized so a^2 + b^2 == 1\nfloat compute_max_saturation(float a, float b) {\n  // Max saturation will be when one of r, g or b goes below zero.\n\n  // Select different coefficients depending on which component goes below zero first\n  float k0, k1, k2, k3, k4, wl, wm, ws;\n\n  if (-1.88170328 * a - 0.80936493 * b > 1.0) {\n    // Red component\n    k0 = +1.19086277; k1 = +1.76576728; k2 = +0.59662641; k3 = +0.75515197; k4 = +0.56771245;\n    wl = +4.0767416621; wm = -3.3077115913; ws = +0.2309699292;\n  }\n  else if (1.81444104 * a - 1.19445276 * b > 1.0) {\n    // Green component\n    k0 = +0.73956515; k1 = -0.45954404; k2 = +0.08285427; k3 = +0.12541070; k4 = +0.14503204;\n    wl = -1.2684380046; wm = +2.6097574011; ws = -0.3413193965;\n  }\n  else {\n    // Blue component\n    k0 = +1.35733652; k1 = -0.00915799; k2 = -1.15130210; k3 = -0.50559606; k4 = +0.00692167;\n    wl = -0.0041960863; wm = -0.7034186147; ws = +1.7076147010;\n  }\n\n  // Approximate max saturation using a polynomial:\n  float S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b;\n\n  // Do one step Halley's method to get closer\n  // this gives an error less than 10e6, except for some blue hues where the dS/dh is close to infinite\n  // this should be sufficient for most applications, otherwise do two/three steps\n\n  float k_l = +0.3963377774 * a + 0.2158037573 * b;\n  float k_m = -0.1055613458 * a - 0.0638541728 * b;\n  float k_s = -0.0894841775 * a - 1.2914855480 * b;\n\n  {\n    float l_ = 1.0 + S * k_l;\n    float m_ = 1.0 + S * k_m;\n    float s_ = 1.0 + S * k_s;\n\n    float l = l_ * l_ * l_;\n    float m = m_ * m_ * m_;\n    float s = s_ * s_ * s_;\n\n    float l_dS = 3.0 * k_l * l_ * l_;\n    float m_dS = 3.0 * k_m * m_ * m_;\n    float s_dS = 3.0 * k_s * s_ * s_;\n\n    float l_dS2 = 6.0 * k_l * k_l * l_;\n    float m_dS2 = 6.0 * k_m * k_m * m_;\n    float s_dS2 = 6.0 * k_s * k_s * s_;\n\n    float f = wl * l + wm * m + ws * s;\n    float f1 = wl * l_dS + wm * m_dS + ws * s_dS;\n    float f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2;\n\n    S = S - f * f1 / (f1 * f1 - 0.5 * f * f2);\n  }\n\n  return S;\n}\n\n// finds L_cusp and C_cusp for a given hue\n// a and b must be normalized so a^2 + b^2 == 1\nvec2 find_cusp(float a, float b) {\n  // First, find the maximum saturation (saturation S = C/L)\n  float S_cusp = compute_max_saturation(a, b);\n\n  // Convert to linear sRGB to find the first point where at least one of r,g or b >= 1:\n  vec4 rgb_at_max = oklab_to_linear_rgb(vec4(1.0, S_cusp * a, S_cusp * b, 1.0));\n  float L_cusp = cbrt(1.0 / max(max(rgb_at_max.x, rgb_at_max.y), rgb_at_max.z));\n  float C_cusp = L_cusp * S_cusp;\n\n  return vec2(L_cusp, C_cusp);\n}\n\n\n// Finds intersection of the line defined by\n// L = L0 * (1 - t) + t * L1;\n// C = t * C1;\n// a and b must be normalized so a^2 + b^2 == 1\nfloat find_gamut_intersection(float a, float b, float L1, float C1, float L0) {\n  vec2 cusp = find_cusp(a, b);\n  float cusp_l = cusp.x;\n  float cusp_c = cusp.y;\n  // Find the intersection for upper and lower half seprately\n  float t;\n\n  // Lower half\n  if (((L1 - L0) * cusp_c - (cusp_l - L0) * C1) <= 0.0) {\n    t = cusp_c * L0 / (C1 * cusp_l + cusp_c * (L0 - L1));\n  }\n  // Upper half\n  else {\n    // First intersect with triangle\n    t = cusp_c * (L0 - 1.0) / (C1 * (cusp_l - 1.0) + cusp_c * (L0 - L1));\n\n    // Then one step Halley's method\n    {\n      float dL = L1 - L0;\n      float dC = C1;\n\n      float k_l = +0.3963377774 * a + 0.2158037573 * b;\n      float k_m = -0.1055613458 * a - 0.0638541728 * b;\n      float k_s = -0.0894841775 * a - 1.2914855480 * b;\n\n      float l_dt = dL + dC * k_l;\n      float m_dt = dL + dC * k_m;\n      float s_dt = dL + dC * k_s;\n\n      // If higher accuracy is required, 2 or 3 iterations of the following block can be used:\n      {\n        float L = L0 * (1.0 - t) + t * L1;\n        float C = t * C1;\n\n        float l_ = L + C * k_l;\n        float m_ = L + C * k_m;\n        float s_ = L + C * k_s;\n\n        float l = l_ * l_ * l_;\n        float m = m_ * m_ * m_;\n        float s = s_ * s_ * s_;\n\n        float ldt = 3.0 * l_dt * l_ * l_;\n        float mdt = 3.0 * m_dt * m_ * m_;\n        float sdt = 3.0 * s_dt * s_ * s_;\n\n        float ldt2 = 6.0 * l_dt * l_dt * l_;\n        float mdt2 = 6.0 * m_dt * m_dt * m_;\n        float sdt2 = 6.0 * s_dt * s_dt * s_;\n\n        float r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s - 1.0;\n        float r1 = 4.0767416621 * ldt - 3.3077115913 * mdt + 0.2309699292 * sdt;\n        float r2 = 4.0767416621 * ldt2 - 3.3077115913 * mdt2 + 0.2309699292 * sdt2;\n\n        float u_r = r1 / (r1 * r1 - 0.5 * r * r2);\n        float t_r = -r * u_r;\n\n        float g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s - 1.0;\n        float g1 = -1.2684380046 * ldt + 2.6097574011 * mdt - 0.3413193965 * sdt;\n        float g2 = -1.2684380046 * ldt2 + 2.6097574011 * mdt2 - 0.3413193965 * sdt2;\n\n        float u_g = g1 / (g1 * g1 - 0.5 * g * g2);\n        float t_g = -g * u_g;\n\n        float b = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s - 1.0;\n        float b1 = -0.0041960863 * ldt - 0.7034186147 * mdt + 1.7076147010 * sdt;\n        float b2 = -0.0041960863 * ldt2 - 0.7034186147 * mdt2 + 1.7076147010  * sdt2;\n\n        float u_b = b1 / (b1 * b1 - 0.5 * b * b2);\n        float t_b = -b * u_b;\n\n        t_r = u_r >= 0.0 ? t_r : 10.0e5;\n        t_g = u_g >= 0.0 ? t_g : 10.0e5;\n        t_b = u_b >= 0.0 ? t_b : 10.0e5;\n\n        t += min(t_r, min(t_g, t_b));\n      }\n    }\n  }\n\n  return t;\n}\n\n// clamp_mode\n// https://bottosson.github.io/posts/gamutclipping/\n// 0 = no clamp (default)\n// 1 = keep lightness, clamp chroma\n// 2 = projection toward point, hue independent\n// 3 = projection toward point, hue dependent\n// 4 = adaptive Lightness, hue independent\n// 5 = adaptive Lightness, hue dependent\nvec4 oklab_to_srgb(vec4 oklab, int clamp_mode) {\n  vec4 linear_rgb = oklab_to_linear_rgb(oklab);\n  vec4 srgb = linear_rgb_to_srgb(linear_rgb);\n\n  // for anything sufficiently dark, return 0,0,0 (rather than negative RGB values)\n  if (srgb.x < 0.0001 && srgb.y < 0.0001 && srgb.z < 0.0001) {\n    return vec4(0.0, 0.0, 0.0, oklab.w);\n  }\n\n  // if inside sRGB gamut, return\n  if (\n    (linear_rgb.x > 0.0 && linear_rgb.x < 1.0 &&\n     linear_rgb.y > 0.0 && linear_rgb.y < 1.0 &&\n     linear_rgb.z > 0.0 && linear_rgb.z < 1.0) || clamp_mode == 0) {\n    return srgb;\n  }\n\n  float eps = 0.00001;\n  float alpha = 0.05; // TODO: allow config?\n  float c = max(eps, sqrt(pow(oklab.y, 2.0) + pow(oklab.z, 2.0)));\n  float L0 = oklab.x;\n  float a = oklab.y / c;\n  float b = oklab.z / c;\n\n  // 1. keep lightness, clamp chroma\n  if (clamp_mode == 1) {\n    // The cusp is computed here and in find_gamut_intersection, an optimized solution would only compute it once.\n    L0 = clamp(oklab.x, 0.0, 1.0);\n  }\n  // 2. projection toward point, hue independent\n  else if (clamp_mode == 2) {\n    L0 = 0.5;\n  }\n  // 3. projection toward point, hue dependent\n  else if (clamp_mode == 3) {\n    L0 = find_cusp(a, b).x;\n  }\n  // 4. adaptive Lightness, hue independent\n  else if (clamp_mode == 4) {\n    float Ld = oklab.x - 0.5;\n    float e1 = 0.5 + abs(Ld) + alpha * c;\n    L0 = 0.5 * (1.0 + sign(Ld) * (e1 - sqrt(pow(e1, 2.0) - 2.0 * abs(Ld))));\n  }\n  // 5. adaptive Lightness, hue dependent\n  else if (clamp_mode == 5) {\n    float cusp_l = find_cusp(a, b).x;\n    float Ld = oklab.x - cusp_l;\n    float k = 2.0 * (Ld >= 0.0 ? 1.0 - cusp_l : cusp_l);\n    float e1 = 0.5 * k + abs(Ld) + alpha * c / k;\n    L0 = cusp_l + 0.5 * (sign(Ld) * (e1 - sqrt(pow(e1, 2.0) - 2.0 * k * abs(Ld))));\n  }\n\n  float t = find_gamut_intersection(a, b, oklab.x - 0.1, c, L0);\n  float l_clipped = L0 * (1.0 - t) + t * oklab.x;\n  float c_clipped = t * c;\n\n  vec4 clamped_oklab = vec4(l_clipped, c_clipped * a, c_clipped * b, oklab.w);\n  return linear_rgb_to_srgb(oklab_to_linear_rgb(clamped_oklab));\n}\n\nvec4 oklch_to_srgb(vec4 oklch, int clamp_mode) {\n  return oklab_to_srgb(lch_to_lab(oklch), clamp_mode);\n}\n\nvec4 srgb_to_oklch(vec4 srgb) {\n  vec4 linear_rgb = srgb_to_linear_rgb(srgb);\n  vec4 oklab = linear_rgb_to_oklab(linear_rgb);\n  return lab_to_lch(oklab);\n}\n";
export declare const OKHSL = "// toe function for L_r\nfloat toe(float x) {\n  float k_1 = 0.206;\n  float k_2 = 0.03;\n  float k_3 = (1.0 + k_1) / (1.0 + k_2);\n  return 0.5 * (k_3 * x - k_1 + sqrtf((k_3 * x - k_1) * (k_3 * x - k_1) + 4 * k_2 * k_3 * x));\n}\n\n// inverse toe function for L_r\nfloat toe_inv(float x) {\n  float k_1 = 0.206;\n  float k_2 = 0.03;\n  float k_3 = (1.0 + k_1) / (1.0 + k_2);\n  return (x * x + k_1 * x) / (k_3 * (x + k_2));\n}\n\nto_ST(vec2 cusp) {\n  float L = cusp.x;\n  float C = cusp.y;\n  return vec2(C / L, C / (1.0 - L));\n}\n\nokhsv_to_srgb(vec4 hsv) {\n  float h = hsv.x;\n  float s = hsv.y;\n  float v = hsv.z;\n  float alpha = hsv.w;\n\n  float a_ = cosf(2.0 * pi * h);\n  float b_ = sinf(2.0 * pi * h);\n\n  LC cusp = find_cusp(a_, b_);\n  ST ST_max = to_ST(cusp);\n  float S_max = ST_max.x;\n  float T_max = ST_max.y;\n  float S_0 = 0.5;\n  float k = 1 - S_0 / S_max;\n\n  // first we compute L and V as if the gamut is a perfect triangle:\n\n  // L, C when v==1:\n  float L_v = 1     - s * S_0 / (S_0 + T_max - T_max * k * s);\n  float C_v = s * T_max * S_0 / (S_0 + T_max - T_max * k * s);\n\n  float L = v * L_v;\n  float C = v * C_v;\n\n  // then we compensate for both toe and the curved top part of the triangle:\n  float L_vt = toe_inv(L_v);\n  float C_vt = C_v * L_vt / L_v;\n\n  float L_new = toe_inv(L);\n  C = C * L_new / L;\n  L = L_new;\n\n  vec4 rgb_scale = oklab_to_linear_srgb(vec4(L_vt, a_ * C_vt, b_ * C_vt, alpha));\n  float scale_L = cbrtf(1.0 / fmax(fmax(rgb_scale.x, rgb_scale.y), fmax(rgb_scale.z, 0.0)));\n\n  L = L * scale_L;\n  C = C * scale_L;\n\n  vec4 rgb = oklab_to_linear_srgb(vec4(L, C * a_, C * b_, alpha));\n  return vec4(\n    srgb_transfer_function(rgb.x),\n    srgb_transfer_function(rgb.y),\n    srgb_transfer_function(rgb.z),\n    rgb.w\n  );\n}\n\nvec4 srgb_to_okhsv(vec4 rgb) {\n  vec4 lab = linear_srgb_to_oklab(\n    srgb_transfer_function_inv(rgb.x),\n    srgb_transfer_function_inv(rgb.y),\n    srgb_transfer_function_inv(rgb.z),\n    rgb.w\n  );\n\n  float C = sqrtf(lab.y * lab.y + lab.z * lab.z);\n  float a_ = lab.y / C;\n  float b_ = lab.z / C;\n\n  float L = lab.x;\n  float h = 0.5 + 0.5 * atan2f(-lab.z, -lab.y) / pi;\n\n  vec2 cusp = find_cusp(a_, b_);\n  vec2 ST_max = to_ST(cusp);\n  float S_max = ST_max.x;\n  float T_max = ST_max.y;\n  float S_0 = 0.5;\n  float k = 1 - S_0 / S_max;\n\n  // first we find L_v, C_v, L_vt and C_vt\n\n  float t = T_max / (C + L * T_max);\n  float L_v = t * L;\n  float C_v = t * C;\n\n  float L_vt = toe_inv(L_v);\n  float C_vt = C_v * L_vt / L_v;\n\n  // we can then use these to invert the step that compensates for the toe and the curved top part of the triangle:\n  vec4 rgb_scale = oklab_to_linear_srgb(vec4(L_vt, a_ * C_vt, b_ * C_vt, rgb.w));\n  float scale_L = cbrtf(1.0 / fmax(fmax(rgb_scale.x, rgb_scale.y), fmax(rgb_scale.z, 0.0)));\n\n  L = L / scale_L;\n  C = C / scale_L;\n\n  C = C * toe(L) / L;\n  L = toe(L);\n\n  // we can now compute v and s:\n\n  float v = L / L_v;\n  float s = (S_0 + T_max) * C_v / ((T_max * S_0) + T_max * k * C_v);\n\n  return vec4(h, s, v, rgb.w);\n}\n\nvec2 get_ST_mid(float a_, float b_) {\n  float S = 0.11516993f + 1.0 / (\n    +7.44778970f + 4.15901240f * b_\n    + a_ * (-2.19557347f + 1.75198401f * b_\n      + a_ * (-2.13704948f - 10.02301043f * b_\n        + a_ * (-4.24894561f + 5.38770819f * b_ + 4.69891013f * a_\n          )))\n    );\n\n  float T = 0.11239642f + 1.0 / (\n    +1.61320320f - 0.68124379f * b_\n    + a_ * (+0.40370612f + 0.90148123f * b_\n      + a_ * (-0.27087943f + 0.61223990f * b_\n        + a_ * (+0.00299215f - 0.45399568f * b_ - 0.14661872f * a_\n          )))\n    );\n\n  return vec2(S, T);\n}\n\nvec3 get_Cs(float L, float a_, float b_) {\n  vec2 cusp = find_cusp(a_, b_);\n\n  float C_max = find_gamut_intersection(a_, b_, L, 1, L, cusp);\n  vec2 ST_max = to_ST(cusp);\n\n  // Scale factor to compensate for the curved part of gamut shape:\n  float k = C_max / fmin((L * ST_max.x), (1 - L) * ST_max.y);\n\n  float C_mid;\n  {\n    vec2 ST_mid = get_ST_mid(a_, b_);\n\n    // Use a soft minimum function, instead of a sharp triangle shape to get a smooth value for chroma.\n    float C_a = L * ST_mid.x;\n    float C_b = (1.0 - L) * ST_mid.y;\n    C_mid = 0.9f * k * sqrtf(sqrtf(1.0 / (1.0 / (C_a * C_a * C_a * C_a) + 1.0 / (C_b * C_b * C_b * C_b))));\n  }\n\n  float C_0;\n  {\n    // for C_0, the shape is independent of hue, so ST are constant. Values picked to roughly be the average values of ST.\n    float C_a = L * 0.4;\n    float C_b = (1.0 - L) * 0.8;\n\n    // Use a soft minimum function, instead of a sharp triangle shape to get a smooth value for chroma.\n    C_0 = sqrtf(1.0 / (1.0 / (C_a * C_a) + 1.0 / (C_b * C_b)));\n  }\n\n  return vec3(C_0, C_mid, C_max);\n}\n\nvec4 okhsl_to_srgb(vec4 hsl) {\n  float h = hsl.x;\n  float s = hsl.y;\n  float l = hsl.z;\n\n  if (l == 1.0) {\n    return vec4(1.0, 1.0, 1.0, hsl.w);\n  }\n\n  else if (l == 0.0) {\n    return vec4(0.0, 0.0, 0.0, hsl.w);\n  }\n\n  float a_ = cosf(2.0 * pi * h);\n  float b_ = sinf(2.0 * pi * h);\n  float L = toe_inv(l);\n\n  vec3 cs = get_Cs(L, a_, b_);\n  float C_0 = cs.x;\n  float C_mid = cs.y;\n  float C_max = cs.z;\n\n    // Interpolate the three values for C so that:\n    // At s=0: dC/ds = C_0, C=0\n    // At s=0.8: C=C_mid\n    // At s=1.0: C=C_max\n\n  float mid = 0.8;\n  float mid_inv = 1.25;\n\n  float C, t, k_0, k_1, k_2;\n\n  if (s < mid) {\n    t = mid_inv * s;\n\n    k_1 = mid * C_0;\n    k_2 = (1.0 - k_1 / C_mid);\n\n    C = t * k_1 / (1.0 - k_2 * t);\n  } else {\n    t = (s - mid)/ (1 - mid);\n\n    k_0 = C_mid;\n    k_1 = (1.0 - mid) * C_mid * C_mid * mid_inv * mid_inv / C_0;\n    k_2 = (1.0 - (k_1) / (C_max - C_mid));\n\n    C = k_0 + t * k_1 / (1.0 - k_2 * t);\n  }\n\n  vec4 rgb = oklab_to_linear_srgb(vec4(L, C * a_, C * b_, hsl.w));\n  return {\n    srgb_transfer_function(rgb.x),\n    srgb_transfer_function(rgb.y),\n    srgb_transfer_function(rgb.z),\n    hsl.w\n  };\n}\n\nvec4 srgb_to_okhsl(vec4 rgb) {\n  vec4 lab = linear_srgb_to_oklab(\n    srgb_transfer_function_inv(rgb.x),\n    srgb_transfer_function_inv(rgb.y),\n    srgb_transfer_function_inv(rgb.z),\n    rgb.w\n  });\n\n  float C = sqrtf(lab.y * lab.y + lab.z * lab.z);\n  float a_ = lab.y / C;\n  float b_ = lab.y / C;\n\n  float L = lab.x;\n  float h = 0.5 + 0.5 * atan2f(-lab.z, -lab.y) / pi;\n\n  vec2 cs = get_Cs(L, a_, b_);\n  float C_0 = cs.x;\n  float C_mid = cs.y;\n  float C_max = cs.z;\n\n  // Inverse of the interpolation in okhsl_to_srgb:\n\n  float mid = 0.8;\n  float mid_inv = 1.25;\n\n  float s;\n  if (C < C_mid) {\n    float k_1 = mid * C_0;\n    float k_2 = (1.0 - k_1 / C_mid);\n\n    float t = C / (k_1 + k_2 * C);\n    s = t * mid;\n  } else {\n    float k_0 = C_mid;\n    float k_1 = (1.0 - mid) * C_mid * C_mid * mid_inv * mid_inv / C_0;\n    float k_2 = (1.0 - (k_1) / (C_max - C_mid));\n\n    float t = (C - k_0) / (k_1 + k_2 * (C - k_0));\n    s = mid + (1.0 - mid) * t;\n  }\n\n  float l = toe(L);\n  return vec4(h, s, l, rgb.w);\n}";
//# sourceMappingURL=oklab.d.ts.map