Technical SEO Audit

    https://oklchtools.com/hsl-to-oklch
    googleGooglebot
    52
    Without
    67
    With
    +15
    Delta
    Status200
    Size2.14 KB
    Redirects0
    Content depth0 words

    Robots.txt Analysis

    Crawler access rules

    Googlebot
    Googlebot
    GPTBot
    GPTBot
    ClaudeBot
    ClaudeBot
    PerplexityBot
    PerplexityBot
    Bingbot
    Bingbot
    facebookexternalhit
    facebookexternalhit
    5 user-agents · 0 sitemaps
    Full analysis

    Social Media Preview

    Open Graph tags

    OG Preview
    oklchtools.com
    OKLCH color converter
    Convert HSL, RGB, and Hex colors to OKLCH format with precision and in bulk

    Tag Status

    Full preview
    og:title
    og:description
    og:image
    twitter:card
    Without Pre-rendering
    52
    4 issues
    •  Meta description too short (21)
    •  Missing <h1>
    •  Missing canonical link
    •  Very low content depth (0 words)
    With LovableHTML
    67
    2 issues
    •  Meta description too short (21)
    •  Very low content depth (266 words)
    1
    -
    <!DOCTYPE html>
    1
    +
    <!DOCTYPE html><html lang="en"><head>
    2
    -
    <html lang="en">
    2
    +
        <meta charset="UTF-8">
    3
    -
      <head>
    3
    +
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4
    -
        <meta charset="UTF-8" />
    5
    -
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6
        <title>OKLCH color converter - Bulk convert colors with precision</title>
    4
        <title>OKLCH color converter - Bulk convert colors with precision</title>
    7
    -
        <meta name="description" content="OKLCH color converter" />
    5
    +
        <meta name="description" content="OKLCH color converter">
    8
    -
        <meta name="author" content="@launchfastshop" />
    6
    +
        <meta name="author" content="@launchfastshop">
    9
    7
    10
        <!-- Google Fonts -->
    8
        <!-- Google Fonts -->
    11
    -
        <link
    9
    +
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;display=swap">
    12
    -
          rel="stylesheet"
    10
    +
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;600;700&amp;display=swap">
    13
    -
          href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap"
    11
    +
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    14
    -
        />
    12
    +
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    15
    -
        <link
    13
    +
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    16
    -
          rel="stylesheet"
    14
    +
        <link rel="manifest" href="/site.webmanifest">
    17
    -
          href="https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;600;700&display=swap"
    18
    -
        />
    19
    -
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    20
    -
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    21
    -
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    22
    -
        <link rel="manifest" href="/site.webmanifest" />
    23
    15
    24
    -
        <meta property="og:title" content="OKLCH color converter" />
    16
    +
        <meta property="og:title" content="OKLCH color converter">
    25
    -
        <meta
    17
    +
        <meta property="og:description" content="Convert HSL, RGB, and Hex colors to OKLCH format with precision and in bulk">
    26
    -
          property="og:description"
    18
    +
        <meta property="og:type" content="website">
    27
    -
          content="Convert HSL, RGB, and Hex colors to OKLCH format with precision and in bulk"
    19
    +
        <meta property="og:image" content="https://oklchtools.com/og.webp">
    28
    -
        />
    29
    -
        <meta property="og:type" content="website" />
    30
    -
        <meta property="og:image" content="https://oklchtools.com/og.webp" />
    31
    20
    32
    -
        <meta name="twitter:card" content="summary_large_image" />
    21
    +
        <meta name="twitter:card" content="summary_large_image">
    33
    -
        <meta name="twitter:site" content="@launchfastshop" />
    22
    +
        <meta name="twitter:site" content="@launchfastshop">
    34
    -
        <meta name="twitter:image" content="https://oklchtools.com/og.webp" />
    23
    +
        <meta name="twitter:image" content="https://oklchtools.com/og.webp">
    35
    -
        <script type="module" crossorigin src="/assets/index-Cq2YYx1o.js"></script>
    24
    +
        <script type="module" crossorigin="" src="/assets/index-Cq2YYx1o.js"></script>
    36
    -
        <link rel="stylesheet" crossorigin href="/assets/index-BgvS7C9R.css">
    25
    +
        <link rel="stylesheet" crossorigin="" href="/assets/index-BgvS7C9R.css">
    37
    -
      </head>
    26
    +
      <style type="text/css">:where(html[dir="ltr"]),:where([data-sonner-toaster][dir="ltr"]){--toast-icon-margin-start: -3px;--toast-icon-margin-end: 4px;--toast-svg-margin-start: -1px;--toast-svg-margin-end: 0px;--toast-button-margin-start: auto;--toast-button-margin-end: 0;--toast-close-button-start: 0;--toast-close-button-end: unset;--toast-close-button-transform: translate(-35%, -35%)}:where(html[dir="rtl"]),:where([data-sonner-toaster][dir="rtl"]){--toast-icon-margin-start: 4px;--toast-icon-margin-end: -3px;--toast-svg-margin-start: 0px;--toast-svg-margin-end: -1px;--toast-button-margin-start: 0;--toast-button-margin-end: auto;--toast-close-button-start: unset;--toast-close-button-end: 0;--toast-close-button-transform: translate(35%, -35%)}:where([data-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999}:where([data-sonner-toaster][data-x-position="right"]){right:max(var(--offset),env(safe-area-inset-right))}:where([data-sonner-toaster][data-x-position="left"]){left:max(var(--offset),env(safe-area-inset-left))}:where([data-sonner-toaster][data-x-position="center"]){left:50%;transform:translate(-50%)}:where([data-sonner-toaster][data-y-position="top"]){top:max(var(--offset),env(safe-area-inset-top))}:where([data-sonner-toaster][data-y-position="bottom"]){bottom:max(var(--offset),env(safe-area-inset-bottom))}:where([data-sonner-toast]){--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none;overflow-wrap:anywhere}:where([data-sonner-toast][data-styled="true"]){padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}:where([data-sonner-toast]:focus-visible){box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}:where([data-sonner-toast][data-y-position="top"]){top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position="bottom"]){bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-toast]) :where([data-icon]){display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}:where([data-sonner-toast][data-promise="true"]) :where([data-icon])>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:none;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}:where([data-sonner-toast]) :where([data-button]):focus-visible{box-shadow:0 0 0 2px #0006}:where([data-sonner-toast]) :where([data-button]):first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}:where([data-sonner-toast]) :where([data-cancel]){color:var(--normal-text);background:rgba(0,0,0,.08)}:where([data-sonner-toast][data-theme="dark"]) :where([data-cancel]){background:rgba(255,255,255,.3)}:where([data-sonner-toast]) :where([data-close-button]){position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--gray1);color:var(--gray12);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}:where([data-sonner-toast]) :where([data-close-button]):focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}:where([data-sonner-toast]) :where([data-disabled="true"]){cursor:not-allowed}:where([data-sonner-toast]):hover :where([data-close-button]):hover{background:var(--gray2);border-color:var(--gray5)}:where([data-sonner-toast][data-swiping="true"]):before{content:"";position:absolute;left:0;right:0;height:100%;z-index:-1}:where([data-sonner-toast][data-y-position="top"][data-swiping="true"]):before{bottom:50%;transform:scaleY(3) translateY(50%)}:where([data-sonner-toast][data-y-position="bottom"][data-swiping="true"]):before{top:50%;transform:scaleY(3) translateY(-50%)}:where([data-sonner-toast][data-swiping="false"][data-removed="true"]):before{content:"";position:absolute;inset:0;transform:scaleY(2)}:where([data-sonner-toast]):after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}:where([data-sonner-toast][data-mounted="true"]){--y: translateY(0);opacity:1}:where([data-sonner-toast][data-expanded="false"][data-front="false"]){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}:where([data-sonner-toast])>*{transition:opacity .4s}:where([data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"])>*{opacity:0}:where([data-sonner-toast][data-visible="false"]){opacity:0;pointer-events:none}:where([data-sonner-toast][data-mounted="true"][data-expanded="true"]){--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}:where([data-sonner-toast][data-removed="true"][data-front="true"][data-swipe-out="false"]){--y: translateY(calc(var(--lift) * -100%));opacity:0}:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"]){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"]){--y: translateY(40%);opacity:0;transition:transform .5s,opacity .2s}:where([data-sonner-toast][data-removed="true"][data-front="false"]):before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount, 0px));transition:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation:swipe-out .2s ease-out forwards}@keyframes swipe-out{0%{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}@media (max-width: 600px){[data-sonner-toaster]{position:fixed;--mobile-offset: 16px;right:var(--mobile-offset);left:var(--mobile-offset);width:100%}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset)}[data-sonner-toaster][data-y-position=bottom]{bottom:20px}[data-sonner-toaster][data-y-position=top]{top:20px}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset);right:var(--mobile-offset);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg: #fff;--normal-border: var(--gray4);--normal-text: var(--gray12);--success-bg: hsl(143, 85%, 96%);--success-border: hsl(145, 92%, 91%);--success-text: hsl(140, 100%, 27%);--info-bg: hsl(208, 100%, 97%);--info-border: hsl(221, 91%, 91%);--info-text: hsl(210, 92%, 45%);--warning-bg: hsl(49, 100%, 97%);--warning-border: hsl(49, 91%, 91%);--warning-text: hsl(31, 92%, 45%);--error-bg: hsl(359, 100%, 97%);--error-border: hsl(359, 100%, 94%);--error-text: hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg: #000;--normal-border: hsl(0, 0%, 20%);--normal-text: var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg: #fff;--normal-border: var(--gray3);--normal-text: var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg: #000;--normal-border: hsl(0, 0%, 20%);--normal-text: var(--gray1);--success-bg: hsl(150, 100%, 6%);--success-border: hsl(147, 100%, 12%);--success-text: hsl(150, 86%, 65%);--info-bg: hsl(215, 100%, 6%);--info-border: hsl(223, 100%, 12%);--info-text: hsl(216, 87%, 65%);--warning-bg: hsl(64, 100%, 6%);--warning-border: hsl(60, 100%, 12%);--warning-text: hsl(46, 87%, 65%);--error-bg: hsl(358, 76%, 10%);--error-border: hsl(357, 89%, 16%);--error-text: hsl(358, 100%, 81%)}[data-rich-colors=true][data-sonner-toast][data-type=success],[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info],[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning],[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error],[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-sonner-toast],[data-sonner-toast]>*,.sonner-loading-bar{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}
    27
    +
    </style><link rel="canonical" href="https://oklchtools.com/hsl-to-oklch"></head>
    38
    28
    39
      <body>
    29
      <body>
    40
    -
        <div id="root"></div>
    30
    +
        <div id="root"><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events: none;"><ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol></div><a class="cursor-pointer fixed bottom-10 z-50 hover:scale-105 transition-all duration-300 right-[-300px]" href="https://launchfast.shop?ref=oklchtools" rel="dofollow" target="_blank"><div class="relative overflow-hidden rounded-2xl shadow-lg backdrop-blur-sm max-w-xs"><div class="absolute inset-0 animate-gradient-shift opacity-95" style="background: linear-gradient(-45deg, rgb(34, 139, 34), rgb(91, 184, 91), rgb(157, 78, 221), rgb(143, 212, 143), rgb(34, 139, 34)) 0% 0% / 300% 300%;"></div><div class="relative p-4 flex items-center space-x-3"><div class="flex-shrink-0"><div class="bg-white/20 rounded-xl p-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap text-yellow-200"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div></div><div class="flex-1 min-w-0"><h3 class="text-white font-semibold text-sm font-satoshi truncate">Launch your MVP in 4 weeks</h3><p class="text-white/80 text-xs font-medium">Click to learn more</p></div></div></div></a><nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/60 backdrop-blur-lg"><div class="container mx-auto px-4"><div class="flex items-center justify-between h-16"><a class="flex items-center space-x-2 group" href="/"><div class="bg-gradient-to-br from-primary to-primary-600 p-2 rounded-xl group-hover:scale-105 transition-transform shadow-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette w-5 h-5 text-white"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg></div><span class="font-satoshi font-bold text-xl text-gray-900">OKLCH<span class="text-primary">Tools</span></span></a><div class="hidden lg:flex items-center space-x-1"><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house w-4 h-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Home</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/hex-to-oklch">HEX to OKLCH</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/oklch-to-hex">OKLCH to HEX</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/rgb-to-oklch">RGB to OKLCH</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap bg-primary/20 text-primary" href="/hsl-to-oklch">HSL to OKLCH</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/oklch-color-picker">OKLCH Color Picker</a><a class="flex items-center gap-2 px-3 py-2 rounded-xl lowercase text-sm font-medium transition-all duration-200 whitespace-nowrap text-gray-700 hover:text-primary" href="/what-is-oklch"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info w-4 h-4"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>What is OKLCH?</a></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:text-accent-foreground h-9 rounded-md lg:hidden p-2 hover:bg-white/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu w-5 h-5"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button></div></div><div class="lg:hidden transition-all duration-300 overflow-hidden max-h-0 opacity-0"><div class="bg-white/95 backdrop-blur-xl border-t border-white/20 shadow-xl"><div class="container mx-auto px-4 py-4"><div class="grid gap-2"><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/"><div class="font-medium text-base">Home</div><div class="text-sm mt-1 text-gray-500">All converters</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/hex-to-oklch"><div class="font-medium text-base">HEX to OKLCH</div><div class="text-sm mt-1 text-gray-500">Convert HEX colors to OKLCH format</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/oklch-to-hex"><div class="font-medium text-base">OKLCH to HEX</div><div class="text-sm mt-1 text-gray-500">Convert OKLCH colors to HEX format</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/rgb-to-oklch"><div class="font-medium text-base">RGB to OKLCH</div><div class="text-sm mt-1 text-gray-500">Convert RGB colors to OKLCH format</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 bg-primary text-white shadow-lg" href="/hsl-to-oklch"><div class="font-medium text-base">HSL to OKLCH</div><div class="text-sm mt-1 text-white/80">Convert HSL colors to OKLCH format</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/oklch-color-picker"><div class="font-medium text-base">OKLCH Color Picker</div><div class="text-sm mt-1 text-gray-500">Pick and generate OKLCH colors</div></a><a class="flex flex-col px-4 py-3 rounded-xl transition-all duration-200 text-gray-700 hover:bg-gray-50" href="/what-is-oklch"><div class="font-medium text-base">What is OKLCH?</div><div class="text-sm mt-1 text-gray-500">Learn about OKLCH color format</div></a></div></div></div></div></nav><div class="h-16"></div><div class="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 font-satoshi"><div class="container mx-auto px-4 py-8 max-w-6xl w-full"><div class="mb-12 flex flex-col justify-start items-start"><h1 class="flex items-center text-2xl md:text-3xl text-primary-600 text-left font-satoshi font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette inline-block mr-4 bg-primary text-primary-foreground p-2 rounded-full"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg>HSL to OKLCH converter</h1><p class="pl-12 text-xl text-gray-600 max-w-2xl leading-relaxed mb-6 text-left">Convert HSL colors to OKLCH format instantly</p><a href="/"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border bg-background h-10 px-4 py-2 rounded-3xl border-primary text-primary hover:bg-primary hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left mr-2"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>All Converters</button></a></div><div class="text-card-foreground border-0 shadow-2xl rounded-4xl bg-white/80 backdrop-blur-sm h-full flex flex-col"><div class="flex flex-col space-y-1.5 p-6 pb-6 flex-shrink-0"><h3 class="tracking-tight font-satoshi text-lg font-semibold text-gray-900 flex items-center"><div class="w-3 h-3 bg-purple-500 rounded-full mr-3"></div>HSL to OKLCH converter</h3></div><div class="p-6 pt-0 flex flex-col flex-1 space-y-6"><div class="flex-1 flex flex-col"><textarea class="flex min-h-[80px] w-full bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 flex-1 text-sm border-2 border-gray-200 rounded-3xl focus:border-purple-500 transition-colors resize-none font-mono bg-gradient-to-br from-purple-50 to-purple-100" placeholder="Paste your HSL colors here, one per line: hsl(120, 50%, 75%)
    41
    -
      <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"9b79ad28666fd6a1","version":"2025.9.1","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfEdge":true,"cfOrigin":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"4ba3c47bf7eb46559fee744f549b2118","b":1}' crossorigin="anonymous"></script>
    31
    +
    hsl(240, 100%, 50%)
    42
    -
    </body>
    32
    +
    hsl(0, 100%, 50%)
    43
    -
    </html>
    33
    +
    120, 50%, 75%
    34
    +
    240 100% 50%" rows="10"></textarea></div><div class="flex gap-2 flex-shrink-0"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-9 px-3 flex-1 bg-purple-500 border border-purple-700 hover:bg-purple-600 text-white font-semibold py-3 rounded-3xl hover:shadow-xl transition-all duration-200">Convert Colors</button></div></div></div><div class="bg-white/80 backdrop-blur-sm rounded-4xl shadow-2xl p-8 m-12"><h2 class="text-3xl font-semibold text-gray-900 mb-6">How to convert HSL to OKLCH</h2><div class="grid md:grid-cols-2 gap-8"><div><h3 class="text-xl font-semibold mb-4">Easy steps:</h3><ol class="space-y-3 text-gray-700"><li class="flex items-start"><span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-0.5">1</span>Paste your HSL color values in the input area</li><li class="flex items-start"><span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-0.5">2</span>Click "Convert Colors" to transform HSL to OKLCH</li><li class="flex items-start"><span class="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-0.5">3</span>Copy individual OKLCH values or all at once</li></ol></div><div><h3 class="text-xl font-semibold mb-4">Supported formats:</h3><ul class="space-y-2 text-gray-700"><li class="font-mono text-sm bg-gray-100 p-2 rounded">hsl(120, 50%, 75%)</li><li class="font-mono text-sm bg-gray-100 p-2 rounded">120, 50%, 75%</li><li class="font-mono text-sm bg-gray-100 p-2 rounded">120 50% 75%</li></ul><p class="text-sm text-gray-600 mt-4">Our converter automatically detects HSL patterns and converts them to precise OKLCH values.</p></div></div></div><div class="bg-white/80 backdrop-blur-sm rounded-4xl shadow-2xl p-8 mb-12"><h2 class="text-3xl font-semibold text-gray-900 mb-6">Why convert HSL to OKLCH?</h2><div class="grid md:grid-cols-3 gap-6"><div class="text-center"><div class="bg-purple-100 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center"><span class="text-2xl">🎯</span></div><h3 class="font-semibold mb-2">Better Precision</h3><p class="text-gray-600 text-sm">OKLCH provides more accurate color representation than HSL, especially for accessibility calculations.</p></div><div class="text-center"><div class="bg-green-100 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center"><span class="text-2xl">🌈</span></div><h3 class="font-semibold mb-2">Uniform Lightness</h3><p class="text-gray-600 text-sm">Unlike HSL, OKLCH lightness values correspond to how humans actually perceive brightness.</p></div><div class="text-center"><div class="bg-blue-100 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center"><span class="text-2xl">🔮</span></div><h3 class="font-semibold mb-2">Future Standards</h3><p class="text-gray-600 text-sm">OKLCH is part of CSS Color Level 4 and represents the future of web color standards.</p></div></div></div><div class="bg-white/80 backdrop-blur-sm rounded-4xl shadow-2xl p-8 mb-12"><h2 class="text-3xl font-semibold text-gray-900 mb-6">HSL vs OKLCH: Key differences</h2><div class="grid md:grid-cols-2 gap-8"><div class="bg-purple-50 rounded-2xl p-6"><h3 class="text-xl font-semibold mb-4 text-purple-700">HSL Color Space</h3><ul class="space-y-2 text-gray-700"><li class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>Hue, Saturation, Lightness model</li><li class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>Non-perceptually uniform lightness</li><li class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>Widely supported in CSS</li><li class="flex items-center"><span class="w-2 h-2 bg-purple-500 rounded-full mr-3"></span>Can produce unexpected results in calculations</li></ul></div><div class="bg-primary-50 rounded-2xl p-6"><h3 class="text-xl font-semibold mb-4 text-primary-700">OKLCH Color Space</h3><ul class="space-y-2 text-gray-700"><li class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span>OK Lightness, Chroma, Hue model</li><li class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span>Perceptually uniform lightness</li><li class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span>Modern browsers support</li><li class="flex items-center"><span class="w-2 h-2 bg-primary rounded-full mr-3"></span>Predictable color manipulations</li></ul></div></div></div><div class="bg-white/80 backdrop-blur-sm rounded-4xl shadow-2xl p-8 mb-12"><h2 class="text-3xl font-semibold text-gray-900 mb-6">Common HSL to OKLCH conversions</h2><div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4"><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(255, 0, 0);"></div><span class="font-semibold">Red</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(0, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(62.8% 0.25 29)</p></div></div></div><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(0, 255, 0);"></div><span class="font-semibold">Green</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(120, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(86.6% 0.29 142)</p></div></div></div><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(0, 0, 255);"></div><span class="font-semibold">Blue</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(240, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(45.2% 0.31 264)</p></div></div></div><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(255, 255, 0);"></div><span class="font-semibold">Yellow</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(60, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(96.8% 0.21 109)</p></div></div></div><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(255, 0, 255);"></div><span class="font-semibold">Magenta</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(300, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(70.2% 0.32 328)</p></div></div></div><div class="bg-gray-50 rounded-2xl p-4"><div class="flex items-center mb-3"><div class="w-8 h-8 rounded-xl border-2 border-white shadow-md mr-3" style="background-color: rgb(0, 255, 255);"></div><span class="font-semibold">Cyan</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HSL:</span><p class="font-mono text-sm">hsl(180, 100%, 50%)</p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(91.1% 0.15 195)</p></div></div></div></div></div><div class="mb-12"><div class="bg-card border shadow-2xl rounded-4xl bg-gradient-to-r from-primary-100/70 via-primary-50 to-primary-100/70 backdrop-blur-lg text-white overflow-hidden w-full"><div class="p-8 text-center"><h3 class="text-3xl mb-4 text-primary-600 font-semibold">Launch your MVP <br>in <span class="font-playfair px-1 text-primary-700 italic">Record</span> time</h3><p class="text-primary mb-6 max-w-2xl mx-auto text-xl">LaunchFast.shop - MVP development and fractional development support for small teams and solo founders</p><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border bg-background hover:bg-accent hover:text-accent-foreground h-11 px-8 rounded-full border-primary bg-gradient-to-r text-primary from-primary-200/50 via-primary-300/50 to-primary-200/50">Click to launch your MVP in 4 weeks</button></div></div></div><footer class="py-4 text-center text-gray-500"><p class="mb-2">Need other conversions? Try our <a class="text-primary underline underline-offset-4" href="/rgb-to-oklch">RGB to OKLCH converter</a> or <a class="text-primary underline underline-offset-4" href="/oklch-color-picker">OKLCH color picker</a></p>a <a rel="dofollow" href="https://launchfast.shop?ref=oklch" class="text-primary underline underline-offset-4">LaunchFast.shop</a> product ♥️</footer></div></div></div>
    35
    +
      <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;version&quot;:&quot;2024.11.0&quot;,&quot;token&quot;:&quot;4ba3c47bf7eb46559fee744f549b2118&quot;,&quot;r&quot;:1,&quot;server_timing&quot;:{&quot;name&quot;:{&quot;cfCacheStatus&quot;:true,&quot;cfEdge&quot;:true,&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfOrigin&quot;:true,&quot;cfSpeedBrain&quot;:true},&quot;location_startswith&quot;:null}}" crossorigin="anonymous"></script>
    36
    +
    37
    +
    38
    +
    </body></html>