python生成web安全色图片html

html安全色是指不考虑操作系统和一些机型，对比度可以明显区分的颜色。

第一次用opencv库，花了几小时边学边练，生成1920*1080分辨率的桌面背景图片，图片有点丑，但是可以通过改python的部分值，得到不同分辨率的桌面背景。对于做前端而言能够有所帮助。当然网上有专门的网站，还可以在潘通上查找对应颜色，但是对于网络不顺畅或者经常选色的专业来说，还是有一定用处。

先上图

代码如下，带了一堆注释便于调试：

#生成html安全色图片
#2020.4.12:demo
import cv2
import numpy as np
##cv2颜色顺序为BGR

##图像大小
img_w=1920
img_h=1080
##cv2字体设置
font = cv2.FONT_HERSHEY_TRIPLEX
##字体在图中的相对移动位置
wx=5
wy=40
# 创建一个宽1920高1080的黑色画布，RGB(0,0,0)即黑色
np.set_printoptions(threshold=1000)
img=np.zeros((img_h,img_w,3),np.uint8)
##一共216个安全色，每个框大小为128*72像素，可以用公式计算不同，这里简化
for py in range(15):
    for px in range(15):
        cnt=py*15+px  ##安全色计数
        if cnt<216:
            r_x=px*128  ##矩形框x位置
            r_y=py*72   ##矩形框y位置
            w_x=r_x+wx      ##字体x位置
            w_y=r_y+wy      ##字体y位置

            ##从左上到右下RGB按0x33从蓝色增加走，共216色
            cr=int(cnt/36)*0x33 ##按传统RGB顺序放置颜色,红色R
            cg=int(cnt/6%6)*0x33    ##绿色G
            cb=int(cnt%6)*0x33  ##蓝色B
            ##字体颜色为反色，以识别
            wr=0xff-cr
            wg=0xff-cg
            wb=0xff-cb
            ##组成字符显示
            wf = "#0x" + (("%02x" % cr).upper()) + (("%02x" % cg).upper()) + (("%02x" % cb).upper())
            ##绘制矩形
            # print(cnt)
            print(r_x,"  ",r_y,"  ",w_x,"  ",w_y)
            # print(cr,"  ",cg,"  ",cb)
            # # print(wr,"  ",wg,"  ",wb)
            # print(wf)
            cv2.rectangle(img, (r_x, r_y), (r_x+128, r_y+72), (cb, cg, cr), -1, 4)
            ##增加字体
            # cv2.putText(img, wf, (w_x, w_y), font, 0.6, (wr, wb, wg), 1, 8)
            if cr>0x66 or cg>0x66 or cb>0x66 and cr!=0x00 and cg!=0x00 and cb!=0x00:
                cv2.putText(img, wf, (w_x, w_y), font, 0.6, (0, 0, 0), 1, 8)
            else:
                if cr < 0x66 or cg < 0x66 or cb < 0x66:
                    cv2.putText(img, wf, (w_x, w_y), font, 0.6, (255, 255, 255), 1, 8)
                else:
                    cv2.putText(img, wf, (w_x, w_y), font, 0.6, (0, 0, 0), 1, 8)
        else:
            None
##打logo
logo="Powered by c.x 2020.4"
cv2.rectangle(img, (768, 1008), (1920, 1080), (255, 255, 255), -1, 4)
cv2.putText(img, logo, (1664, 1060), font, 0.6, (0, 0, 0), 1, 8)

cv2.imshow("img", img)
cv2.waitKey(3000) #时间为毫秒
cv2.imwrite("final.jpg",img)

安全色是指RGB每0X33一跳，每个颜色通道有6种颜色，总共216种颜色组合。

利用cv2，新建画布，按照计算后每行每列的数量画矩形，然后将色值的字符贴上去即可，原理非常简单。

本来计划用详细的公式，但是需要调试占用时间，所以以1080p作为demo，有兴趣可以试试。

自己用的显示器是4K屏，试了下4K，因为被缩放填充，所以效果和1080的图片类似，而且4K不能整除，会有一条边。

---

框架虽然不到一小时边学边练弄好了，结果发现真正的难题是字符和色块的对比色才是困难的。

一来用反色

结果发现是糊的，对比度不是简单的255减去色框颜色。

然后尝试了前128分块

效果好点了，但是3行绿色那完全看不清。

再试了RB的对调

结果惨不忍睹。

中间试了种种，最后回到较简单的方法，用两个if嵌套，效果就是第一张那样。

这个现在还是不明就里，虽然学色度的时候还认真听了的。如果有专业的，还请指导。