<div style="container-type: inline-size;"> <div style="display: grid; grid-template: repeat(2, 16cqw) / repeat(2, 50cqw); border-radius: 0.5em; overflow: hidden; font-family: var(--font-monospace); font-size: 8cqw;"> <div style="display: flex; align-items: center; justify-content: center; background-color: #a08cc0; color: #fff; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #fff; color: #a08cc0; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #000; color: #a08cc0; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #a08cc0; color: #000; overflow: hidden;">Purplrue</div> </div> </div> ## Hex Code ``` #a08cc0 ``` ``` #A08CC0 ``` ## Color Spaces ``` oklch(67.66% 0.0784 301.96) ``` ``` hsl(263.08, 29.21%, 65.1%) ``` ``` rgb(160, 140, 192) ``` ## 1 pixel image ``` data:image/gif;base64,R0lGODdhAQABAIABAAAAAKCMwCwAAAAAAQABAAACAkwBADs= ``` ```url data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNc0HPgPwAGrQLtpocD7AAAAABJRU5ErkJggg== ```