prefers-contrast 模拟器 - 强制增加/减少对比度
模拟 prefers-contrast: more/less 媒体特性,预览页面在高对比度模式下的视觉效果。
UD5工具箱
ANSI 16色是终端模拟器中最基础的颜色标准,包含8种标准色(黑、红、绿、黄、蓝、品红、青、白)和8种对应的高亮版本。几乎所有终端应用都支持这16种颜色,是终端配色的核心。
Xresources:将内容添加到 ~/.Xresources 并运行 xrdb -merge ~/.Xresources。Kitty:复制到 ~/.config/kitty/kitty.conf。iTerm2:在 Preferences > Profiles > Colors 中导入 .itermcolors 文件。
Background 是终端窗口的实际背景色,Color0 是 ANSI "黑色"的显示颜色。许多方案将它们设为相同值,但也可以分别设置以创建更丰富的视觉效果。两者独立可调。
我们使用 WCAG 标准计算前景色与背景色的对比度比率。≥7:1 为优秀(AAA级),≥4.5:1 为良好(AA级),低于4.5:1 可能影响可读性。深色背景配浅色文字通常能达到较好的对比度。
本工具导出的配色方案兼容主流终端:iTerm2、Kitty、Alacritty、Windows Terminal、GNOME Terminal、Konsole、rxvt-unicode、st 等。选择对应的导出格式即可直接使用。
优质终端配色应保证:①足够的对比度确保代码可读性;②颜色之间区分明显(避免红绿混淆);③避免过于饱和的颜色以减少视觉疲劳;④保持整体色调和谐统一。可参考 Nord、Dracula 等经典方案。
模拟 prefers-contrast: more/less 媒体特性,预览页面在高对比度模式下的视觉效果。
动态调整 accent-color 并实时查看对复选框、单选按钮、进度条和滑块的影响。
编辑 %c 占位符和 CSS 样式,实时查看控制台输出效果,微调后再用于实际调试。
调整 accent-color 值,实时查看单选框、复选框、进度条等原生控件的主题变化。
上传多张小图标,自动合并成一张Sprite图,并生成对应CSS背景定位代码,提升加载性能。
添加本地视频和SRT字幕文件,预览并生成带硬字幕的新视频文件。
输入Proto定义和Base64编码的protobuf数据,在线解码为JSON,辅助分析二进制通信内容。
给定一个边长或对角线,根据常见比例计算另一边长或分辨率。
输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
粘贴HTML和CSS,工具将尝试分析并为你抽取首屏内联样式,辅助性能优化。
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
将上传的小文件或文本转换为可直接嵌入HTML/CSS的data: URI格式。
选择模板,调节颜色与动画,生成美观的单选/复选框样式代码。
在等轴测网格上绘制建筑或场景,支持多图层及调色板,导出等轴测像素艺术作品。
粘贴 Prometheus 指标文本,解析为结构化表格,并支持基本过滤和排序。
选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。
拖放小图片或文本文件,转换为可嵌入HTML/CSS的Data URI,设置MIME类型。
制作一张 3D 翻转卡片,切换 backface-visibility 属性观察背面隐藏与否。
输入进程列表,同时对比先来先服务、短作业优先和轮转调度算法的甘特图和平均等待时间。
添加楼层请求,观察电梯在不同调度算法下的移动轨迹和等待时间。
上传视频和 SRT 字幕文件,将字幕永久烧录到视频中,支持调整字体和位置。
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。
粘贴以data:开头的链接,自动判断MIME类型并预览内容,或提供下载按钮。
添加进程(到达时间、运行时间),并行动画演示先来先服务、短作业优先、轮转等调度算法的执行。
动画展示滑动窗口和令牌桶算法如何限制API请求速率,对比两者差异。
为按钮或卡片配置悬停时的边框、阴影、缩放、颜色等动画,自动生成CSS transition代码。
加载测试页面,实时显示Largest Contentful Paint等核心指标,了解加载体验。
输入LaTeX命令如 \alpha 或 \sum,即时渲染为高清可下载的SVG或PNG图片。
利用浏览器原生API录制屏幕共享或窗口,选择音频源,导出为WebM视频。