开发者

How to emulate the look of an off-white sheet of paper on a computer screen

Thanks for the comments below. In hindsight, I should have been more detailed. I hope the edited version is clearer.

At a high-level, I want to emulate the look of paper as a screen background. This is because I find white (#FFFFF) to be too bright. I looked at a few hardcover books I own and noticed that none of them are bright white. The Kindle screen background is also not bright white.

Hence I would like to find out what is the best way to emulate the look of off-white paper on the screen. I don't want the background to be too "showy" and draw attention (I've seen swatches which emulate handmade paper with some colored thread within, I don't want that): it should just be there.

Is a single RGB value enough, do I need a repeated swatch? If RGB is enough, which ones work best? Are there websites/blogs where this has been d开发者_Python百科iscussed?

A seamless repeatable swatch which I can use as a background image is also OK.

I played around with some color wheels to discover an RGB value and this is the best I could do: rgb(252, 245, 216) == #FCF5D8, but I think I can do better. You see what that color looks by pasting the RGB value here: http://www.colorschemer.com/online.html


It's the texture that matters as well.


i would load the body with a texture ..

body {
  background-image: url(path-to-texture.png);
  background-color: predominent color of that texture;
}

you can google for 'paper texture' and come up with dozens


This is very difficult to do well due to the great colour discrepancies in output devices. What is a nice, almost imperceptible yellowish tinge on one screen, may be perceived as a dirty haze on another. Just put any two screen from different lines/brands next to each other and you'll see what I mean. Depending on what this is for (personal settings / web site / application) you should leave options open to the user.

If you are looking for eye-friendly design, you may also want to look at the foreground color. I am currently building a web application and have adopted a style i which text is entirely blue (0000FF) or navy blue (0000BF) and find the results much easier on the eye than black.


All of my hardcover books are printed on depleted uranium. So their normal color is rgb(22, 44, 22)

Seriously, it depends on the book. Is it an old book or a new one for starters?

Adding a little more to this:

If you are going for a printed-on-paper look you are better off using an image than a single color, since paper is not perfect.


It has also been shown that black on white tires our eyes out faster. However, I just go with very subtle off white colors much of the time. While black on white is the highest contrast possible, black on yellow has been shown to be the most readable. Think legal pads and school busses.

It makes no sense to talk about the "color" of the printed page or a kindle, in the same way as monitor color because these are reflective surfaces and simply reflect the color that shines on them. Paper "brightness" is measured in how much light reflects off the surface. Extremely bright paper may reflect 98% or 99% of light.

The new css3 guidelines allow for hsl colors. This means that you can choose 1-2 hues, and adjust the sat and luminance values for a consistent color scheme. specs. Once you have a color, try a low sat, high lum for your background. Much easier that reconfiguring RGB all the time. Just don't ask me about browser compatibility :-)


The following are some color names and their hexadecimal and decimal RGB values. Most of them look like old paper. The "da Vinci's background" is from a painting on paper with sepia.

  • fcf2d7 = 252,242,215 (da Vinci's background)
  • f4f2e8 = 244,242,232
  • ece9d8 = 236,233,216
  • faf0e6 = 250,240,230
  • ffda95 = 255,218,149
  • f5efdf = 245,239,223
  • antiquewhite = faebd7 = 250,235,215
  • beige = f5f5dc = 245,245,220
  • blanchedalmond = ffebcd = 255,235,205
  • cornsilk = fff8dc = 255,248,220
  • floralwhite = fffaf0 = 255,250,240
  • lightyellow = ffffe0 = 255,255,224
  • linen = faf0e6 = 250,240,230
  • moccasin = ffe4b5 = 255,228,181
  • navajowhite = ffdead = 255,222,173
  • oldlace = fdf5e6 = 253,245,230
  • papayawhip = ffefd5 = 255,239,213
  • seashell = fff5ee = 255,245,238
  • wheat = f5deb3 = 245,222,179


This is because I find white (#FFFFF) to be too bright. I looked at a few hardcover books I own and noticed that none of them are bright white. The Kindle screen background is also not bright white.

The brightness of white depends on the brightness of the illumination. The difference between black and white is the relative amount of light falling on the surface. For example, a cinema screen is white, but when the projector comes on, there are areas on the screen that are illuminated and areas that are not, the latter ones we identify as black, whereas they looked white before we turned on the projector.

So, the difference between the color of the paper in your book and the white on your screen is the amount of light. If you point a brighter light on your book, it'll appear brighter too.

How about turning down the brightness in your monitor? I always do this, I don't understand the people that make their programs black on grey or grey on black. That's just a difficult way of reducing the brightness on the monitor. There's an easily accessible button on your screen to accomplish the same thing.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜