{% comment %} Load all Important Profile Preferences Colors {% endcomment %}
<div class="accent_color_compilations">
    <!-- 400 Colors -->
    <div class="bg-purple-900 hover:bg-purple-900 text-purple-900 border-purple-900"></div>
    <div class="bg-blue-900 hover:bg-blue-900 text-blue-900 border-blue-900"></div>
    <div class="bg-green-900 hover:bg-green-900 text-green-900 border-green-900"></div>
    <div class="bg-yellow-900 hover:bg-yellow-900 text-yellow-900 border-yellow-900"></div>
    <div class="bg-red-900 hover:bg-red-900 text-red-900 border-red-900"></div>
    <div class="bg-pink-900 hover:bg-pink-900 text-pink-900 border-pink-900"></div>
    <div class="bg-indigo-900 hover:bg-indigo-900 text-indigo-900 border-indigo-900"></div>
    <div class="bg-cyan-900 hover:bg-cyan-900 text-cyan-900 border-cyan-900"></div>
    <div class="bg-orange-900 hover:bg-orange-900 text-orange-900 border-orange-900"></div>
    <div class="bg-teal-900 hover:bg-teal-900 text-teal-900 border-teal-900"></div>
    <div class="bg-lime-900 hover:bg-lime-900 text-lime-900 border-lime-900"></div>
    <div class="bg-amber-900 hover:bg-amber-900 text-amber-900 border-amber-900"></div>

    <div class="bg-purple-400 hover:bg-purple-400 text-purple-400 border-purple-400"></div>
    <div class="bg-blue-400 hover:bg-blue-400 text-blue-400 border-blue-400"></div>
    <div class="bg-green-400 hover:bg-green-400 text-green-400 border-green-400"></div>
    <div class="bg-yellow-400 hover:bg-yellow-400 text-yellow-400 border-yellow-400"></div>
    <div class="bg-red-400 hover:bg-red-400 text-red-400 border-red-400"></div>
    <div class="bg-pink-400 hover:bg-pink-400 text-pink-400 border-pink-400"></div>
    <div class="bg-indigo-400 hover:bg-indigo-400 text-indigo-400 border-indigo-400"></div>
    <div class="bg-cyan-400 hover:bg-cyan-400 text-cyan-400 border-cyan-400"></div>
    <div class="bg-orange-400 hover:bg-orange-400 text-orange-400 border-orange-400"></div>
    <div class="bg-teal-400 hover:bg-teal-400 text-teal-400 border-teal-400"></div>
    <div class="bg-lime-400 hover:bg-lime-400 text-lime-400 border-lime-400"></div>
    <div class="bg-amber-400 hover:bg-amber-400 text-amber-400 border-amber-400"></div>
    
    <!-- 600 Colors + Checkboxes-->
    <div class="bg-purple-600 hover:bg-purple-600 text-purple-600 peer-checked:bg-purple-600 border-purple-600"></div>
    <div class="bg-blue-600 hover:bg-blue-600 text-blue-600 peer-checked:bg-blue-600 border-blue-600"></div>
    <div class="bg-green-600 hover:bg-green-600 text-green-600 peer-checked:bg-green-600 border-green-600"></div>
    <div class="bg-yellow-600 hover:bg-yellow-600 text-yellow-600 peer-checked:bg-yellow-600 border-yellow-600"></div>
    <div class="bg-red-600 hover:bg-red-600 text-red-600 peer-checked:bg-red-600 border-red-600"></div>
    <div class="bg-pink-600 hover:bg-pink-600 text-pink-600 peer-checked:bg-pink-600 border-pink-600"></div>
    <div class="bg-indigo-600 hover:bg-indigo-600 text-indigo-600 peer-checked:bg-indigo-600 border-indigo-600"></div>
    <div class="bg-cyan-600 hover:bg-cyan-600 text-cyan-600 peer-checked:bg-cyan-600 border-cyan-600"></div>
    <div class="bg-orange-600 hover:bg-orange-600 text-orange-600 peer-checked:bg-orange-600 border-orange-600"></div>
    <div class="bg-teal-600 hover:bg-teal-600 text-teal-600 peer-checked:bg-teal-600 border-teal-600"></div>
    <div class="bg-lime-600 hover:bg-lime-600 text-lime-600 peer-checked:bg-lime-600 border-lime-600"></div>
    <div class="bg-amber-600 hover:bg-amber-600 text-amber-600 peer-checked:bg-amber-600 border-amber-600"></div>

    <!-- 700 Colors -->
    <div class="bg-purple-700 hover:bg-purple-700 text-purple-700"></div>
    <div class="bg-blue-700 hover:bg-blue-700 text-blue-700"></div>
    <div class="bg-green-700 hover:bg-green-700 text-green-700"></div>
    <div class="bg-yellow-700 hover:bg-yellow-700 text-yellow-700"></div>
    <div class="bg-red-700 hover:bg-red-700 text-red-700"></div>
    <div class="bg-pink-700 hover:bg-pink-700 text-pink-700"></div>
    <div class="bg-indigo-700 hover:bg-indigo-700 text-indigo-700"></div>
    <div class="bg-cyan-700 hover:bg-cyan-700 text-cyan-700"></div>
    <div class="bg-orange-700 hover:bg-orange-700 text-orange-700"></div>
    <div class="bg-teal-700 hover:bg-teal-700 text-teal-700"></div>
    <div class="bg-lime-700 hover:bg-lime-700 text-lime-700"></div>
    <div class="bg-amber-700 hover:bg-amber-700 text-amber-700"></div>
</div>
{% comment %} File Used only for CSS Generation {% endcomment %}

<div class="max-w-72 lg:max-w-96"></div>