Technical SEO Audit for https://oklchtools.com/hex-to-oklch

Technical SEO Audit

https://oklchtools.com/hex-to-oklch
Googlebot
Without
With
+15
Delta
Status200
Size2.14 KB
Redirects0
Content depth0 words
Robots.txt Analysis

Crawler access rules
Googlebot
GPTBot
ClaudeBot
PerplexityBot
Bingbot
facebookexternalhit
5 user-agents · 0 sitemaps
Full analysis
Social Media Preview

Open Graph tags
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
With LovableHTML672 issues Meta description too short (21) Very low content depth (238 words)
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>OKLCH color converter - Bulk convert colors with precision</title>
    <meta name="description" content="OKLCH color converter">
    <meta name="author" content="@launchfastshop">

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;600;700&amp;display=swap">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">







    <meta property="og:title" content="OKLCH color converter">
    <meta property="og:description" content="Convert HSL, RGB, and Hex colors to OKLCH format with precision and in bulk">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://oklchtools.com/og.webp">




    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@launchfastshop">
    <meta name="twitter:image" content="https://oklchtools.com/og.webp">
    <script type="module" crossorigin="" src="/assets/index-Cq2YYx1o.js"></script>
    <link rel="stylesheet" crossorigin="" href="/assets/index-BgvS7C9R.css">
  <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%)}
</style><link rel="canonical" href="https://oklchtools.com/hex-to-oklch"></head>

  <body>
    <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 bg-primary/20 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 text-gray-700 hover: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 bg-primary text-white shadow-lg" href="/hex-to-oklch"><div class="font-medium text-base">HEX to OKLCH</div><div class="text-sm mt-1 text-white/80">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 text-gray-700 hover:bg-gray-50" href="/hsl-to-oklch"><div class="font-medium text-base">HSL to OKLCH</div><div class="text-sm mt-1 text-gray-500">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>HEX to OKLCH converter</h1><p class="pl-12 text-xl text-gray-600 max-w-2xl leading-relaxed mb-6 text-left">Convert HEX 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-blue-500 rounded-full mr-3"></div>Hex 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-blue-500 transition-colors resize-none font-mono bg-gradient-to-br from-blue-50 to-blue-100" placeholder="Paste your Hex colors here, one per line: #FF0000
#00FF00
#0000FF
#f00
A52A2A
800080" 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-blue-500 border border-blue-700 hover:bg-blue-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 mt-12 backdrop-blur-sm rounded-4xl shadow-2xl p-8 mb-12"><h2 class="text-3xl font-semibold text-gray-900 mb-6">How to convert HEX to OKLCH</h2><div class="bg-blue-50 rounded-2xl p-6 mb-8"><h3 class="text-lg font-semibold mb-3 text-blue-800">💡 Pro Tip: Direct URL Conversion</h3><p class="text-blue-700 mb-3">Convert any HEX color instantly by adding it to the URL:</p><div class="space-y-2"><div class="bg-white rounded-lg p-3 font-mono text-sm"><span class="text-gray-600">oklchtools.com/color/</span><span class="text-blue-600">FF0000</span><span class="text-gray-500 ml-2">(recommended)</span></div><div class="bg-white rounded-lg p-3 font-mono text-sm"><span class="text-gray-600">oklchtools.com/hex-to-oklch?color=</span><span class="text-blue-600">#FF0000</span></div></div><p class="text-blue-600 text-sm mt-2">Both formats work, but /color/ URLs are preferred for SEO!</p></div><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 HEX 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 HEX 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">#FF0000</li><li class="font-mono text-sm bg-gray-100 p-2 rounded">#f00</li><li class="font-mono text-sm bg-gray-100 p-2 rounded">FF0000</li><li class="font-mono text-sm bg-gray-100 p-2 rounded">f00</li></ul><p class="text-sm text-gray-600 mt-4">Our converter automatically detects HEX 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 HEX to OKLCH?</h2><div class="grid md:grid-cols-3 gap-6"><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">Perceptual Uniformity</h3><p class="text-gray-600 text-sm">OKLCH provides better perceptual uniformity than HEX, making color adjustments more predictable.</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">Better Accessibility</h3><p class="text-gray-600 text-sm">OKLCH makes it easier to create accessible color combinations and maintain contrast ratios.</p></div><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">Modern CSS</h3><p class="text-gray-600 text-sm">Use OKLCH in modern CSS for superior color manipulation and future-proof design.</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">Common HEX 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">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/FF0000">#FF0000</a></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">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/00FF00">#00FF00</a></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">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/0000FF">#0000FF</a></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, 255);"></div><span class="font-semibold">White</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/FFFFFF">#FFFFFF</a></p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(100% 0 0)</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, 0);"></div><span class="font-semibold">Black</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/000000">#000000</a></p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(0% 0 0)</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(128, 128, 128);"></div><span class="font-semibold">Gray</span></div><div class="space-y-2"><div><span class="text-xs text-gray-500">HEX:</span><p class="font-mono text-sm"><a class="text-blue-600 hover:underline" href="/color/808080">#808080</a></p></div><div><span class="text-xs text-gray-500">OKLCH:</span><p class="font-mono text-sm">oklch(59.8% 0 0)</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 to convert in the other direction? Try our <a class="text-primary underline underline-offset-4" href="/oklch-to-hex">OKLCH to HEX converter</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>
  <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>


</body></html>
Technical SEO Audit

Robots.txt Analysis

Social Media Preview

Tag Status

Without Pre-rendering

With LovableHTML

Potential issues: 4

Good standing: 11
