用JavaScript脚本制作自己的色谱图

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

 

网站用色是网站建设必须认真考虑的重要问题。网站的色彩运用往往能够体现一个网站的特色和艺术风格。因此,在设计网页时常常需要设置网页背景或其它网页元素的颜色,而网页设计软件(如Dreamweaver)的调色板一般只有200多种色样供选择。如果你在设计网页时比较考究用色,可以使用JavaScript脚本制作自己的色谱,这将给你的设计工作带来很大的方便。

显示色谱图的HTML代码和JavaScript脚本如下:

<HTML>
<HEAD>
<TITLE>色谱图</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<h2>512色色谱图</h2>
<SCRIPT LANGUAGE="JavaScript">
//定义数组对象
clr=new Array('00','20','40','60','80','a0','c0','ff');
//创建8个8行8列的表格
for (i=0;i<8;i++) {
//创建表格,单元格内填充距8像素
document.write("<table border=1 cellpadding=8>");
for (j=0;j<8;j++) {
document.write("<tr>");
for (k=0;k<8;k++) {
//设置表格单元的背景颜色
document.write('<td bgcolor="#'+clr[i]+clr[j]+clr[k]+'">');
//设置文字颜色
document.write('<tt><font color="#'+clr[7-i]+clr[7-j]+clr[7-k]+'"> ');
//显示16进制颜色值
document.write('#'+clr[i]+clr[j]+clr[k]+' </font></tt></td>'); }
document.write("</tr>"); }
document.write("</table><br>"); }
</SCRIPT>
</CENTER>
</BODY>
</HTML>

点击这里即可看到512色色谱图。色谱图由8个表格组成,每个表格为64种颜色。应用时,复制你在色谱图中选定的颜色上的16进制颜色值,粘贴到颜色代码框中即可。

 

 
colormaps.js 颜色.js 在 javascript 中使用颜色的真正基本工具。 立即下载

相关推荐

js-colormaps:Matplotlib颜色可在JavaScript中使用

js-colormaps 想法和版权 这个项目的想法是使的在JavaScript中可用。 这也意味着:我没有在这里发明任何颜色,我不拥有它们,并且我不声称自己这样做。 我只是试将它们提供给他人-因此,如果我碰巧与此项目侵犯了您的任何版权,请在将我拖到法庭之前通知我,我们可以解决这个问题:) 关于我自己的版权:该项目是根据MIT许可发布的,它的基本意思是“随心所欲”(但不要追究我的责任!)。 我刚开始是因为我需要另一个项目中的JS色,而Google并没有吐出任何好的结果,所以我决定自己动手做,并将其提供给公众:) 什么是色彩? 好吧,如果您找到了这个存储库,我想您已经知道什么是色,但是无论如何我都会解释一下(也许我对色的想法根本上是错误的?)。 从技术上/数学上讲,颜色映射是将$ [0,1] \映射到[0,255] ^ 3 $的映射,即将0到1之间的每个值映射到0到25​​5

js实现的网页颜色代码表全集

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML><HEAD><TITLE>网页颜色代码全集</TITLE> <META http-equiv=Content-Type content=”text/html; charset=gb2312″> <META content=”MSHTML 6.00.2800.1543″ name=GENERATOR> <STYLE type=text/css>TD {     FONT-SIZE: 10.8pt } BODY {     FONT-SIZE: 10.8pt }

geeSharp.js:一个库,用于在Google Earth Engine中泛锐化多光谱像并评估像质量

geeSharp GEE中的Pan-harpen多光谱像,只需一行代码: var panSharpened = sharpening . PCA . sharpen ( img . select ( [ "B4" , "B3" , "B2" , ] ) , img . select ( [ "B8" ] ) ; 生成像质量指标以验证锐化结果: var imgQ = quality . Q . calculate ( originalImage , panSharpened ) ; 安装 通过包括var sharpening = require("users/aazuspan/geeSharp:sharpening.js");导入锐化函数var sharpening = require("users/aazuspan/geeSharp:sharpening.js"); 在您的脚本

频谱 js+canvas

使用到了Colormap,来用数据对应颜色,在布上显示 其中碰到了一些坑,canvas的布大小属性和style设置的不是同一个东西,这个和svg的一样 <button>+1 绘制</button><br /><br /> <div class="myChart"> <div class="info"></div> <canvas id="myCanvas" style="borde.

qq_25919495的博客 2278

鸟哥的Linux私房菜基础学习篇 第3章与第4章的重点探索

目录前言一、安装CentOS 7.x1.注意事项2.操作流程1.刻录2.安装虚拟机3.正式安装二、使用步骤1.引入库2.读入数据总结 前言 在第三、四章的学习中,为配合后期任务的需要,笔者这里尝试并且成功的发行版为以下两个镜像文件:鸟哥要求安装的CentOS-7-x86_64-Everything-2009.iso(虚拟机)、笔者后期需要使用的ubuntukylin-20.04.1-enhanced-amd64.iso,鉴于第三、四章多为实践性操作,笔者这里也分享一些安装时遇到的问题及解决方案 一、安装Ce

ClaireTang1的博客 3070

鸟哥的Linux私房菜-基础学习篇4

18.目录的连接数量 以硬连接进行“文件的连接”时,在ls -l所显示的第2字段回增加1,新建目录,新目录的连接数为2,而上层目录的连接数则会增加1   19.硬盘的分区、格式化、检验与载入 分区:fdisk /dev/hda m获取帮助,ldnpqw   磁盘格式化:mke2fs或mkfs.ext3 #mke2fs -j -L "logical" /dev/hda1 #mkfs...

allenhulove的博客 115

鸟哥的Linux私房菜·基础学习篇·第3章/第4章笔记

第3章: 安装CentOS 7.x Index of /centos/7/isos/x86_64/ (ustc.edu.cn) 其中torrent后缀的是种子文件 在Install CentOS7 选项按下TAB,输入 vmlinuz initrd=initrd.img inst.stage2=hd:LABEL=CentOS\x207\x20x86_64 rd.live.check quiet inst.gpt 以实现强制GPT 选择”带GUI”的服务器。(GNOME与KDE Plasma Workspa

wow1024的博客 318

鸟哥的Linux私房菜(基础篇)-第二章、 Linux 如何学习(二.4. 鸟哥的建议(重点在solution的学习))

第二章、 Linux 如何学习 最近更新日期:2009/08/06 4. 鸟哥的建议(重点在solution的学习) 鸟哥的建议(重点在Solution的学习): 除了上面的学习建议之外,还有其他的建议吗?确实是有的!其实,无论作什么事情,对人类而言,两个重要的因素是造成我们学习的原动力: 成就感兴趣 很多人问过我,鸟哥是怎么学习Linux的?由上面鸟哥的悲惨Lin

GarfieldEr007的专栏 1322

linux的核心版本(鸟哥的linux私房菜-基础学习篇第4版摘抄)

Linux 的核心版本编号有点类似如下的样子 3.10.0-123.el7.x86_64  主版本.次版本.释出版本-修改版本 虽然编号就是如上的方式来编的,不过依据 Linux  核心的发展期程,核心版本的定义有点不太相同 喔! 奇数、偶数版本分类 在 2.6.x 版本以前,托瓦兹将核心的发展趋势分为两股,并根据这两股核心的发展分别给予不同的核 心编号,那就是:

骚年还在等什么,奋斗吧 1105

《鸟哥的Linux 私房菜 基础学习篇(第三版)》——1.4 重点回顾

本节书摘来自异步社区《鸟哥的Linux 私房菜 基础学习篇(第三版)》一书中的第1章,第1.4节,作者:鸟哥著,更多章节内容可以访问云栖社区“异步社区”公众号查看 1.4 重点回顾 鸟哥的Linux 私房菜 基础学习篇(第三版)◆ 计算机主要以二进制作为单位,而目前常用的磁盘容量单位为B,其单位换算为1B = 8bit,其他的以1024为其倍数,如1GB...

weixin_34122548的博客 113

鸟哥的Linux私房菜 基础学习篇读书笔记(4): 安装CentOS与多重引导小技巧

这个章节鸟哥主要讲述的是他以CentOS 5.x为例,进行实际Linux Distribution的安装。鸟哥讲的非常详细,基本上可以说是 手把手的教了,而且又是形界面的安装方式,所以基本上只要按照安装提示一步一步进行,就基本上不会有什么大问题。 这里我将记录自己安装CentOS的一些体会和小问题。 虽然提供的是形界面安装方式,而且也很简单,但是还是需要把前面讲过的MBR

Memory 1356

《鸟哥的Linux 私房菜 基础学习篇(第三版)》——0.4 软件程序运行

本节书摘来自异步社区《鸟哥的Linux 私房菜 基础学习篇(第三版)》一书中的第0章,第0.4节,作者:鸟哥著,更多章节内容可以访问云栖社区“异步社区”公众号查看 0.4 软件程序运行 鸟哥的Linux 私房菜 基础学习篇(第三版)鸟哥在上课时经常会开玩笑地问:“我们知道没有插电的计算机是一堆废铁,那么插了电的计算机是什么?”答案是“一堆会电人的废铁。”...

weixin_34372728的博客 181

Linux 编程学习书籍

Linux 入门书籍。Linux 进阶书籍。

云满笔记 2867

鸟哥的linux私房菜(基础篇)第四版学习笔记 --- 第4章、首次登陆与在线求助

bubbleyang的博客 237

鸟哥的 Linux 私房菜:基础学习篇 第四版pdf阅读笔记关键技术分享与讨论

一本经典的Linux学习指南,适用于初学者和希望深入了解Linux系统的读者。

zuiduodelove22的博客 641

【送书福利第三期】:鸟哥的Linux私房菜:第三版修订. 服务器架设篇

《鸟哥的Linux私房菜——服务器架设篇(第三版修订)》是一本不可或缺的Linux服务器架设指导书,适合想要深入学习Linux服务器架设和管理的读者。本书不仅教授如何搭建服务器,还重点关注服务器的安全防护和维护,以及解决常见问题的策略。作者以系统基础和网络基础为起点,深入浅出地介绍了各种常见服务器的搭建方法。无论您是初学者还是有经验的用户,本书都将帮助您掌握Linux服务器的核心知识,为您的服务器提供稳定、安全的运行环境。

屿小夏.的知识博客 6万+

鸟哥的Linux私房菜(基础学习,服务器架设)

鸟哥的Linux私房菜(基础学习,服务器架设)

yffhhffv的博客 5746

【鸟哥的linux私房菜】终于再次读完《Linux 基础篇》——一些感想

今年暑假才开始入门linux,听说鸟哥的书挺适合入门的,于是就开始从《鸟哥的linux私房菜——基础篇》开始学,暑假的时候,比较粗略地看过了一遍,对linux系统有了整体的概念,也做了一些小笔记,不过由于日常工作学习的需要,主要还是在windows下,实践的时间比较少,所以渐渐地把学过的东西忘了。为了学习方便,我使用的是跟鸟哥一样的centos,装的是双系统。一开始就遇到了麻烦,用家里的台式机装了好

jiange_zh的博客 1万+
上一篇: 网页常用小技巧(JavaScript)
下一篇: 使用JavaScript写的操作系统和输入法程序
CLassic_Ms
博客等级 码龄20年 13粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值