https://colorify.rocks/color/6ca3b7

ID de exploración:
32b3f903-2433-4f7e-a7dd-3e5c8f9a215eFinalizado
URL enviada:
https://colorify.rocks/color/6ca3b7
Informe finalizado:

Enlaces: 0 encontrados

Los enlaces salientes identificados en la página

Variables JavaScript: 19 encontradas

Las variables JavaScript globales cargadas en el objeto de ventana de una página son variables declaradas fuera de las funciones y a las que se puede acceder desde cualquier lugar del código en el ámbito actual

NombreTipo

Mensajes de registro de la consola: 11 encontrados

Mensajes registrados en la consola web

TipoCategoríaRegistrar

HTML

El cuerpo HTML sin procesar de la página

<!DOCTYPE html><html lang="en"><head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="nVEYuU73i0bWhee0CYUBkdGgxXJ5OYVYCR8hyloN">
        <link rel="canonical" href="https://colorify.rocks/color/6ca3b7"> 
        <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">
        <title>
                            Understanding #6CA3B7: Color Values, Schemes, and Accessibility | Colorify.rocks
                    </title>
        <meta property="og:image" content="https://colorify.rocks/storage/hex/6ca3b7.webp">
        <meta name="description" content="Explore color #6ca3b7 - Get detailed information including RGB, HSL, complementary colors, and more.">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&amp;display=swap" rel="stylesheet">

        <!-- Scripts -->
        <link rel="preload" as="style" href="https://colorify.rocks/build/assets/app-Dk4r2uyk.css"><link rel="modulepreload" href="https://colorify.rocks/build/assets/app-z-Rg4TxU.js"><link rel="stylesheet" href="https://colorify.rocks/build/assets/app-Dk4r2uyk.css" data-navigate-track="reload"><script type="text/javascript" src="https://faves.grow.me/main.js" defer="" data-grow-faves-site-id="U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU="></script><script type="module" src="https://colorify.rocks/build/assets/app-z-Rg4TxU.js" data-navigate-track="reload"></script>        <!-- Livewire Styles --><style>[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
    <style>/* Make clicks pass-through */

    #nprogress {
      pointer-events: none;
    }

    #nprogress .bar {
      background: var(--livewire-progress-bar-color, #29d);

      position: fixed;
      z-index: 1031;
      top: 0;
      left: 0;

      width: 100%;
      height: 2px;
    }

    /* Fancy blur effect */
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
      width: 100px;
      height: 100%;
      box-shadow: 0 0 10px var(--livewire-progress-bar-color, #29d), 0 0 5px var(--livewire-progress-bar-color, #29d);
      opacity: 1.0;

      -webkit-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
              transform: rotate(3deg) translate(0px, -4px);
    }

    /* Remove these to get rid of the spinner */
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }

    #nprogress .spinner-icon {
      width: 18px;
      height: 18px;
      box-sizing: border-box;

      border: solid 2px transparent;
      border-top-color: var(--livewire-progress-bar-color, #29d);
      border-left-color: var(--livewire-progress-bar-color, #29d);
      border-radius: 50%;

      -webkit-animation: nprogress-spinner 400ms linear infinite;
              animation: nprogress-spinner 400ms linear infinite;
    }

    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }

    .nprogress-custom-parent #nprogress .spinner,
    .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }

    @-webkit-keyframes nprogress-spinner {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    </style><script type="module" src="https://faves.grow.me/app.9.4.3.js" defer="" data-grow-script="widget" data-grow-me-beta-name="9.4.3" data-grow-me-beta-version="9.4.3" data-grow-faves-site-id="U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU="></script></head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100 flex flex-col">
            <nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="shrink-0 flex items-center">
                    <a href="https://colorify.rocks" class="font-bold text-xl">
                        Colorify Rocks
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class="hidden space-x-8 sm:ml-10 sm:flex">
                    <a href="https://colorify.rocks/discover" class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700">
                        Discover
                    </a>
                    
                    <a href="https://colorify.rocks/glossary" class="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700">
                        Glossary
                    </a>
                    
                    
                </div>
            </div>

            <!-- Generate Button -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">
                <a href="https://colorify.rocks" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    Generate Palette
                </a>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="https://colorify.rocks/discover" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-50">
                Discover
            </a>
            
            <a href="https://colorify.rocks/glossary" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-50">
                Glossary
            </a>
            
            

            <a href="https://colorify.rocks" class="block pl-3 pr-4 py-2 text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-gray-50">
                Generate Palette
            </a>
        </div>
    </div>
</nav> 
            <!-- Page Content -->
            <main class="flex-grow">
                                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" x-data="colorPage">
    <header class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 flex items-center gap-3">
            <span class="w-8 h-8 rounded-lg shadow-sm" style="background-color: #6ca3b7"></span>
            #6CA3B7
        </h1>
        <p class="text-lg text-gray-600 mt-2">Cyan</p>
        <p class="mt-4 text-gray-600 max-w-3xl">
            The color #6CA3B7 is a cyan that can be used in various design contexts. 
            This color has RGB values of 108, 163, 183 and HSL values of 
            196°, 34%, 57%.
        </p>

        <!-- Jump Links -->
        <nav class="mt-6 flex flex-wrap gap-4">
            <a href="#color-values" class="text-blue-600 hover:text-blue-800">Color Values</a>
            <a href="#color-composition" class="text-blue-600 hover:text-blue-800">Color Composition</a>
            <a href="#contrast" class="text-blue-600 hover:text-blue-800">Contrast</a>
            <a href="#color-schemes" class="text-blue-600 hover:text-blue-800">Color Schemes</a>
            <a href="#shades-tints" class="text-blue-600 hover:text-blue-800">Shades &amp; Tints</a>
            <a href="#color-blindness" class="text-blue-600 hover:text-blue-800">Color Blindness</a>
        </nav>
    </header>

    <!-- Color Information -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div id="color-values" class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Color Values for #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Below are the different color format representations for #6CA3B7. 
                You can click any value to copy it to your clipboard.
            </p>
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">HEX:</span>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('#6CA3B7')" x-text="'#6CA3B7'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">#6CA3B7</code>
                        <span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">RGB:</span>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('rgb(108,163,183)')" x-text="'rgb(108,163,183)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">rgb(108,163,183)</code>
                        <span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">HSL:</span>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('hsl(196,34%,57%)')" x-text="'hsl(196,34%,57%)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">hsl(196,34%,57%)</code>
                        <span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">CMYK:</span>
                    <div class="flex items-center gap-2">
                        <code class="bg-gray-100 px-2 py-1 rounded cursor-pointer" @click="copyToClipboard('cmyk(41%, 11%, 0%, 28%)')" x-text="'cmyk(41%, 11%, 0%, 28%)'" x-data="{ copied: false }" @click.prevent="copied = true; setTimeout(() => copied = false, 1000)">cmyk(41%, 11%, 0%, 28%)</code>
                        <span x-show="copied" class="text-sm text-green-600" style="display: none;">Copied!</span>
                    </div>
                </div>
            </div>
        </div>

        <div id="color-composition" class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Color Composition of #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                This visualization shows the RGB (Red, Green, Blue) composition of the color #6CA3B7. 
                Each bar represents the percentage of that primary color in the final mix.
            </p>
            <div class="space-y-4">
                <div class="flex items-center gap-4">
                    <div class="w-24">Red: 42.4%</div>
                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                        <div class="bg-red-500 h-2 rounded-full" style="width: 42.4%"></div>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-24">Green: 63.9%</div>
                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                        <div class="bg-green-500 h-2 rounded-full" style="width: 63.9%"></div>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-24">Blue: 71.8%</div>
                    <div class="flex-1 bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-500 h-2 rounded-full" style="width: 71.8%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contrast Section -->
    <div id="contrast" class="mb-12">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Contrast Analysis for #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Testing this color against light and dark backgrounds to check accessibility standards and readability.
            </p>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Light Background -->
                <div>
                    <h3 class="font-medium mb-3">On Light Background (White #FFFFFF)</h3>
                    <div class="bg-white border rounded-lg p-4 mb-4">
                        <p style="color: #6ca3b7" class="text-lg font-medium">
                            Sample Text in #6CA3B7
                        </p>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Contrast Ratio:</span>
                            <span class="font-medium">4.5:1</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">WCAG AA:</span>
                            <span class="font-medium text-green-600">✓ Passes</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">WCAG AAA:</span>
                            <span class="font-medium text-red-600">✗ Fails</span>
                        </div>
                    </div>
                </div>

                <!-- Dark Background -->
                <div>
                    <h3 class="font-medium mb-3">On Dark Background (Black #000000)</h3>
                    <div class="bg-black border rounded-lg p-4 mb-4">
                        <p style="color: #6ca3b7" class="text-lg font-medium">
                            Sample Text in #6CA3B7
                        </p>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Contrast Ratio:</span>
                            <span class="font-medium">3.8:1</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">WCAG AA:</span>
                            <span class="font-medium text-red-600">✗ Fails</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">WCAG AAA:</span>
                            <span class="font-medium text-red-600">✗ Fails</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Color Schemes -->
    <div id="color-schemes" class="space-y-8">
        <!-- Complementary Colors -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Complementary Colors for #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Complementary colors are pairs of colors that are positioned opposite each other on the color wheel. 
                When used together, they create maximum contrast and visual impact.
            </p>
            <div class="flex gap-4">
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/6ca3b7" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
                        </a>
                    </div>
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/b7806c" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b7806c">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#B7806C</code>
                        </a>
                    </div>
                            </div>
        </div>

        <!-- Analogous Colors -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Analogous Colors for #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Analogous colors are groups of three colors that are next to each other on the color wheel. 
                This color scheme creates a harmonious and cohesive look that's pleasing to the eye.
            </p>
            <div class="flex gap-4">
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/6cb7a5" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6cb7a5">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#6CB7A5</code>
                        </a>
                    </div>
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/6ca3b7" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
                        </a>
                    </div>
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/6c7db7" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6c7db7">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#6C7DB7</code>
                        </a>
                    </div>
                            </div>
        </div>

        <!-- Triadic Colors -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Triadic Colors for #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Triadic color schemes use three colors equally spaced around the color wheel. 
                This combination offers strong visual contrast while maintaining color harmony.
            </p>
            <div class="flex gap-4">
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/6ca3b7" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#6CA3B7</code>
                        </a>
                    </div>
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/b76ca3" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b76ca3">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#B76CA3</code>
                        </a>
                    </div>
                                    <div class="flex-1">
                        <a href="https://colorify.rocks/color/a3b76c" class="block group">
                            <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #a3b76c">
                            </div>
                            <code class="text-sm group-hover:text-blue-600">#A3B76C</code>
                        </a>
                    </div>
                            </div>
        </div>
    </div>

    <!-- Shades and Tints -->
    <div id="shades-tints" class="mt-8 space-y-8">
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Shades of #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Shades are created by adding black to the original color. 
                This progression shows how #6CA3B7 darkens from left to right, 
                creating deeper variations of the original color.
            </p>
            <div class="flex rounded-lg overflow-hidden">
                                    <a href="https://colorify.rocks/color/6ca3b7" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #6CA3B7
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/6193a5" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6193a5">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #6193A5
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/568292" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #568292">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #568292
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/4c7280" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #4c7280">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #4C7280
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/41626e" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #41626e">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #41626E
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/36525c" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #36525c">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #36525C
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/2b4149" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #2b4149">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #2B4149
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/203137" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #203137">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #203137
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/162125" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #162125">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #162125
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/0b1012" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #0b1012">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #0B1012
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/000000" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #000000">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #000000
                            </span>
                        </div>
                    </a>
                            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4">Tints of #6CA3B7</h2>
            <p class="text-gray-600 mb-6">
                Tints are created by adding white to the original color. 
                This progression shows how #6CA3B7 lightens from left to right, 
                creating softer variations of the original color.
            </p>
            <div class="flex rounded-lg overflow-hidden">
                                    <a href="https://colorify.rocks/color/6ca3b7" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6ca3b7">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #6CA3B7
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/7bacbe" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #7bacbe">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #7BACBE
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/89b5c5" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #89b5c5">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #89B5C5
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/98bfcd" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #98bfcd">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #98BFCD
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/a7c8d4" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #a7c8d4">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #A7C8D4
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/b6d1db" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #b6d1db">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #B6D1DB
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/c4dae2" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #c4dae2">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #C4DAE2
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/d3e3e9" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #d3e3e9">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #D3E3E9
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/e2edf1" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #e2edf1">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #E2EDF1
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/f0f6f8" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #f0f6f8">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #F0F6F8
                            </span>
                        </div>
                    </a>
                                    <a href="https://colorify.rocks/color/ffffff" class="flex-1 group relative">
                        <div class="h-20 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #ffffff">
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                            <span class="bg-black/75 text-white text-xs px-2 py-1 rounded">
                                #FFFFFF
                            </span>
                        </div>
                    </a>
                            </div>
        </div>
    </div>

    <!-- Color Blindness Simulation -->
    <div id="color-blindness" class="mt-8 bg-white rounded-xl shadow-lg p-6">
        <h2 class="text-xl font-semibold mb-4">Color Blindness Simulation for #6CA3B7</h2>
        <p class="text-gray-600 mb-6">
            These simulations show how people with different types of color blindness might perceive #6CA3B7. 
            This information is crucial for designing accessible and inclusive color schemes.
        </p>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                <a href="https://colorify.rocks/color/8484b2" class="block group">
                    <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #8484b2">
                    </div>
                    <p class="text-sm font-medium capitalize">protanopia</p>
                    <code class="text-xs group-hover:text-blue-600">#8484B2</code>
                </a>
            </div>
                        <div>
                <a href="https://colorify.rocks/color/817db1" class="block group">
                    <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #817db1">
                    </div>
                    <p class="text-sm font-medium capitalize">deuteranopia</p>
                    <code class="text-xs group-hover:text-blue-600">#817DB1</code>
                </a>
            </div>
                        <div>
                <a href="https://colorify.rocks/color/6faeae" class="block group">
                    <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #6faeae">
                    </div>
                    <p class="text-sm font-medium capitalize">tritanopia</p>
                    <code class="text-xs group-hover:text-blue-600">#6FAEAE</code>
                </a>
            </div>
                        <div>
                <a href="https://colorify.rocks/color/959595" class="block group">
                    <div class="aspect-video rounded-lg shadow-sm mb-2 group-hover:ring-2 group-hover:ring-blue-500 transition-all" style="background-color: #959595">
                    </div>
                    <p class="text-sm font-medium capitalize">achromatopsia</p>
                    <code class="text-xs group-hover:text-blue-600">#959595</code>
                </a>
            </div>
                    </div>
    </div>

    <!-- SEO Footer -->
    <footer class="mt-12 text-sm text-gray-500">
        <p class="mb-2">
            The color #6CA3B7 is a cyan with RGB values of 
            108, 163, 183 and HSL values of 
            196°, 34%, 57%.
        </p>
        <p>
            This color tool provides detailed information about #6CA3B7 including color conversions, 
            color schemes, and accessibility considerations for web and graphic design use.
        </p>
    </footer>
</div>

                            </main>

            <footer class="bg-gray-800 text-white py-8 mt-auto">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <h3 class="text-xl font-bold mb-4">Colorify.rocks</h3>
                <p class="text-gray-300">Your ultimate destination for color inspiration and tools.</p>
            </div>
            <div>
                <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
                <ul class="space-y-2">
                    <li><a href="https://colorify.rocks" class="text-gray-300 hover:text-white">Home</a></li>
                    <li><a href="https://colorify.rocks/discover" class="text-gray-300 hover:text-white">Explore</a></li>
                    <li><a href="https://colorify.rocks/glossary" class="text-gray-300 hover:text-white">Glossary</a></li>
                    <li><a href="https://colorify.rocks/color-generator" class="text-gray-300 hover:text-white">Color Generator</a></li>
                    <li><a href="https://colorify.rocks/contrast-checker" class="text-gray-300 hover:text-white">Contrast Checker</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-lg font-semibold mb-3">Community</h4>
                <ul class="space-y-2">
                    <li><a href="https://colorify.rocks/about" class="text-gray-300 hover:text-white">About us</a></li>
                    <li><a href="https://colorify.rocks/wall-of-love" class="text-gray-300 hover:text-white">Wall of Love</a></li>
                    <li><a href="https://colorify.rocks/the-podcast" class="text-gray-300 hover:text-white">The Podcast</a></li>
                    <li>
                                                <a href="https://colorify.rocks/color/cb13f4" class="text-gray-300 hover:text-white">
                            Color of the Day
                        </a>
                    </li>
                    <li><a href="mailto:[email protected]" class="text-gray-300 hover:text-white">[email protected]</a></li>
                </ul>
            </div>
        </div>
        <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-400">
            <div class="flex justify-center space-x-4 mb-4">
                <a href="https://colorify.rocks/terms" class="text-gray-300 hover:text-white">Terms of Service</a>
                <a href="https://colorify.rocks/privacy" class="text-gray-300 hover:text-white">Privacy Policy</a>
            </div>
            <p>© 2024 Colorify.rocks. All rights reserved.</p>
        </div>
    </div>
</footer>         </div>

        <script src="/livewire/livewire.min.js?id=38dc8241" data-csrf="nVEYuU73i0bWhee0CYUBkdGgxXJ5OYVYCR8hyloN" data-update-uri="/livewire/update" data-navigate-once="true" type="text/javascript"></script>
        <script defer="" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" type="text/javascript"></script>
        <script type="text/javascript">
document.addEventListener('alpine:init', () => {
    Alpine.data('colorPage', () => ({
        async copyToClipboard(text) {
            try {
                await navigator.clipboard.writeText(text);
                console.log('Copied:', text);
            } catch (err) {
                console.error('Failed to copy:', err);
            }
        }
    }));
});
</script>
        
        <!-- Google tag (gtag.js) -->
        <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-3FVL32YBB3" type="text/javascript"></script>
        <script type="text/javascript">
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-3FVL32YBB3');
        </script>

        <script data-grow-initializer="" type="text/javascript">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTpiOTAzMWVjMi0yNDcyLTQ2MmItYWYyYS1jMDJkYjk1M2FlNjU=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>

    <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{&quot;rayId&quot;:&quot;8f1b0d2d8bcb2165&quot;,&quot;version&quot;:&quot;2024.10.5&quot;,&quot;r&quot;:1,&quot;serverTiming&quot;:{&quot;name&quot;:{&quot;cfExtPri&quot;:true,&quot;cfL4&quot;:true,&quot;cfSpeedBrain&quot;:true,&quot;cfCacheStatus&quot;:true}},&quot;token&quot;:&quot;67f3b35c9dfb4db6ba45fd93ad35aa3d&quot;,&quot;b&quot;:1}" crossorigin="anonymous"></script>


</body></html>